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는 페이지를 원치 않는 상속으로 렌더링합니다. 그렇게해서는 안됩니다.
