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;

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

용어에 관해서는, left, right, top및 bottom입니다 CSS는 오프셋 속성을. 특정 위치에 요소를 배치 absolute하거나 (또는 fixed위치 지정 과 함께 사용하는 경우 ) 기본 위치를 기준으로 요소를 이동하는 데 사용됩니다 ( relative위치 지정 과 함께 사용하는 경우 ). 반면 여백은 상자 사이의 간격을 지정하고 때때로 축소되므로 오프셋으로 안정적으로 사용할 수 없습니다.

그러나 귀하의 경우 오프셋 은 CSS 오프셋에서 (단독으로) 계산되지 않을 수 있습니다.

문제가 단순히 쿼크 모드에있는 경우 top 및 left 속성을 음수 값으로 설정하는 것은 좋은 해결 방법이 아닐 수 있습니다. 이는 페이지에 <!DOCTYPE>선언 이 누락 되어 IE8에서 쿼크 모드로 렌더링되는 경우 발생할 수 있습니다 . IE8 개발자 도구에서 "문서 모드"에서 "쿼크 모드"가 선택되지 않았는지 확인합니다. 선택된 경우 적절한 <!DOCTYPE>선언 을 추가해야 할 수 있습니다 .

IE 개발자 도구를 사용하는 경우 실수로 이전 설정에 두지 않았는지 확인하십시오. Internet Explorer 7 Standards로 설정 될 때까지이 문제에 열광했습니다. Internet Explorer 9 표준으로 변경하고 모든 것이 제자리에 고정되었습니다.

요소 상단 이동 : -12px 또는 위치를 지정해도 문제가 해결되지 않고 마스크 만 표시됩니다.

나는 같은 문제가 있었다-하나의 래핑 요소가 혼합되어 있는지 확인하십시오 : 부동 요소가있는 부동 요소-부동 요소가 아닌 요소로 인해 부동 요소에 이상한 오프셋이 발생했습니다.

요소에 대한 여백과 패딩을 정의하면 문제가 발생합니다.

#element_id {margin: 0; padding: 0}  

문제가 있는지 확인하십시오. IE는 페이지를 원치 않는 상속으로 렌더링합니다. 그렇게해서는 안됩니다.

이상하게 보이지만 입력에 대한 설정 vertical-align: top을 시도 할 수 있습니다 CSS. 적어도 IE8에서 수정되었습니다.

DotNetNuke (DNN)에서 실행되는 .NET 기반 웹 사이트에서 동일한 문제가 발생했으며이 문제를 해결 한 것은 기본적으로 양식 태그의 간단한 여백 재설정이었습니다. .NET 기반 웹 사이트는 종종 양식으로 래핑되며 여백을 재설정하지 않고 종종 일부 스크립트가 포함되어있을 때 이상한 오프셋이 나타나는 것을 볼 수 있습니다.

따라서 사이트에서이 문제를 해결하려는 경우 CSS 파일에 다음을 입력하십시오.

form {
  margin: 0;
}

재설정 CSS를 적용하여 해당 '기본값'을 제거 할 수 있습니다. 다음은 재설정 css http://meyerweb.com/eric/tools/css/reset/ 의 예입니다 . 자신의 스타일보다 먼저 재설정 스타일을 적용하십시오.

나는 같은 문제가 있었다. 오프셋은 UpdatePanel 새로 고침 후 나타납니다. 해결책은 다음과 같이 UpdatePanel 앞에 빈 태그를 추가하는 것입니다.

<div></div>

...

윤곽선을 이렇게 설정하지 마십시오.

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

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

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

li {
 display: block;
}

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