ie div 위치 절대 너비 버그

Question

나는 입력 필드를 포함하는 위치 절대와 DIV를 가지고, 나는이 입력이 display : block과 text align으로 달성 한 div 내부에서 수직 및 수평 가운데에 위치 할 필요가있다. 문제는 다음과 같다. 너비 속성이 IE (10 이하)에서 같은 방식으로 작동하지 않는다는 것을 부모 div는 Chrome과 Firefox에서 적절한 너비를 갖지만 IE10,9와 8에서는 완전히 다른 너비를 갖습니다.

이 정보 부모 div는 위치 관련성이있는 다른 div 안에 있습니다. 나는 미래에 다시에서 질문처럼 들리하지만 난 그 메신저는 여전히 노말 후이 문제를 가진 것을 알 정말 놀랐습니다, 등

을 여기 HTML and CSS

<div> 
    <input type="text" /> 
</div> 

div { 
    position:absolute; 
    background: blue; 
    width: 180px; 
    padding:8px 0; 
    display:block; 
} 

input { 
    border-radius: 5px; 
margin: 0; 
height: 20px; 
position: relative; 
display: block; 
margin: 0 auto; 
} 

Answer 1

이 문제는 코드를 알고 em 단위로 인해 발생합니다.

IE와 Chrome을 비교하면 메뉴의 녹색 막대가 IE보다 Chrome보다 왼쪽에있는 것을 볼 수 있습니다. 그 이유는 글꼴 크기에 여기 저기에 픽셀 차이가 있기 때문입니다.

그들은 다르게 계산됩니다. 나는 IE가 다르게 생각한다고 생각한다.

2 개의 브라우저를 똑같이 보이게하려하지 않고 두 브라우저에서 모두 잘 보이도록 만들 수 있습니다. 사용자는 알 수 없습니다.

IE 브라우저에 추가 된 CSS 파일을 사용하거나 javascript로 브라우저를 감지하고 body (Mozilla와 유사) 클래스를 추가하거나 CSS 해킹을 사용하십시오.