CSS를 사용하여 요소의 오프셋을 제거하려면 어떻게해야합니까?

CSS를 사용하여 요소의 오프셋을 제거하려면 어떻게해야합니까?

---

IE8 개발자 도구를 검사 할 때 일부 요소에 위치 문제가 있습니다.

이제 내 문제는 12 오프셋이라는 것을 확신하지만 어떻게 제거 합니까? CSS 오프셋 속성에 대한 언급을 찾을 수 없습니다. 마진 외에 오프셋이 필요합니까?

이것을 생성하는 코드는 다음과 같습니다.

 <div id="wahoo" style="border: solid 1px black; height:100px;">

    <asp:TextBox ID="inputBox" runat="server" />

    <input id="btnDropDown" type="button" style="width:26px; height:26px; background-position: center center; border-left-color: buttonface; background-image: url(Images/WebResource.gif); border-bottom-color: buttonface; border-top-color: buttonface; background-repeat: no-repeat; border-right-color: buttonface;"  tabindex="99" />

    <div id="ListboxWrapper" style="display:none; position:absolute; onfocusout="this.style.display = 'none'"">
       <asp:ListBox ID="lstBoxCompany" runat="server" AutoPostBack="True" OnSelectedIndexChanged="lstBoxCompany_SelectedIndexChanged" style="z-index: 100;" Width="300px" />               
    </div>

</div>

오프셋이있는 요소는 inputBox

---

이 오프셋은 기본적으로 브라우저가 위치 CSS 속성을 기반으로 요소에 대해 계산 한 x, y 위치입니다. 따라서 <br>앞이나 다른 요소 앞에을 넣으면 오프셋이 변경됩니다. 예를 들어 다음과 같이 0으로 설정할 수 있습니다.

#inputBox{position:absolute;top:0px;left:0px;}

또는

#inputBox{position:relative;top:-12px;left:-2px;}

따라서 어떤 위치 문제가 있더라도 반드시 오프셋 문제는 아니지만 top, left, right 및 bottom 속성을 사용하여 항상 수정할 수 있습니다.

문제가있는 브라우저가 호환되지 않습니까?

---

나를 위해, 그것은 상단 오프셋을 일으키는 vertical-align: baseline대 vertical-align: top였습니다.

설정하려고 vertical-align: top

---

빠른 수정:

position: relative;
top: -12px;
left: -2px;

이것은 오프셋의 균형을 맞춰야하지만 전체 레이아웃을 살펴보고 해당 상자가 다른 상자와 어떻게 상호 작용하는지 확인해야 할 수도 있습니다.

As for terminology, left, right, top and bottom are CSS offset properties. They are used for positioning elements at a specific location (when used with absolute or fixed positioning), or to move them relative to their default location (when used with relative positioning). Margins on the other hand specify gaps between boxes and they sometimes collapse, so they can't be reliably used as offsets.

But note that in your case that offset may not be computed (solely) from CSS offsets.

---

Setting the top and left properties to negative values might not be a good workaround if your problem is simply that you're in quirks mode. This can happen if the page is missing a <!DOCTYPE> declaration, causing it to be rendered in quirks mode in IE8. In IE8 Developer Tools, make sure that "Quirks Mode" is not selected under "Document Mode". If it is selected, you may need to add the appropriate <!DOCTYPE> declaration.

---

If you're using the IE developer tools, make sure you haven't accidentally left them at an older setting. I was making myself crazy with this same issue until I saw that it was set to Internet Explorer 7 Standards. Changed it to Internet Explorer 9 Standards and everything snapped right into place.

---

moving element top: -12px or positioning it absolutely doesn't solve the problem but only masks it

I had the same problem - check if you have in one wrapping element mixed: floating elements with non-floating ones - my non-floating element caused this strange offset to the floating one

---

define margin and padding for the element is facing the problem:

#element_id {margin: 0; padding: 0}  

and see if problem exists. IE renders the page with to more unwanted inheritance. you should stop it from doing so.

---

This seems weird, but you can try setting vertical-align: top in the CSS for the inputs. That fixes it in IE8, at least.

---

I had the same issue on our .NET based website, running on DotNetNuke (DNN) and what solved it for me was basically a simple margin reset of the form tag. .NET based websites are often wrapped in a form and without resetting the margin you can see the strange offset appearing sometimes, mostly when there are some scripts included.

So if you are trying to fix this issue on your site, try enter this into your CSS file:

form {
  margin: 0;
}

---

You can apply a reset css to get rid of those 'defaults'. Here is an example of a reset css http://meyerweb.com/eric/tools/css/reset/ . Just apply the reset styles BEFORE your own styles.

---

I had the same problem. The offset appeared after UpdatePanel refresh. The solution was to add an empty tag before the UpdatePanel like this:

<div></div>

...

---

Just set the outline to none like this

[식별자] {개요 : 없음; }

---

제 경우에는 오프셋이 li 내에 그리드 레이아웃이있는 사용자 정의 요소에 추가 된 반면 ul은 수직 flexbox였습니다.

매우 간단한 해결책은 li을 블록 요소로 정의하는 것입니다.

li {
 display: block;
}

그리고 오프셋이 사라졌습니다.

참고 URL : https://stackoverflow.com/questions/4817745/how-do-i-get-rid-of-an-elements-offset-using-css