2013-10-30 2 views
0

나는 다음과 같은 IE8.My 페이지에 이상한 버그가 발생했습니다IE8 텍스트 커버 버그

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta charset='utf-8'> 
     <title>IE8 bug</title> 
    </head> 
    <body> 
     <div class='content'> 
      <a class='inner-text'>你好hello world</a> 
      <a class='wid' >ssss</a> 
     </div> 
    </body> 
    <style type='text/css'> 
    .wid{ 
     border: 1px solid red; 
     } 
    .content{ 
     position: fixed; 
     } 
    .inner-text{ 
     display: inline-block; 
     } 
    </style> 
</html> 

버그 '에서 ssss는'그것을 '안녕 你好 세계의 일부를 포함하고, 것입니다 조건은 다음과 같습니다.

1) .content는 고정 또는 절대 위치에 있어야합니다.

.inner 텍스트의 디스플레이 인라인 블록을 설정 2)는 innerHTML을 비 ASCII 문자를 포함해야합니다입니다;

3) DTD가 있어야합니다.

몇 가지 해결책이 있습니다. 하나는 '안녕하세요. 안녕하세요. 세계'가 '  안녕하세요.   안녕하세요.'로 변경되었습니다.하지만 더 나은 해결책을 원합니다. 저를 도와 주시겠습니까?

+0

내가 함께 또는 UTF8 인코딩없이, 버그를 볼 수 없습니다. 스크린 샷을 게시 할 수 있습니까? 또한'.wid' 클래스에서'margin-left'를 설정해 보셨습니까? – nothingisnecessary

+0

이 버그를 재현 할 수는 있지만 ASCII 문자가 아닌 문자는 필요하지 않습니다. 그것은 '내부 텍스트'에 대한 '인라인 블록'과 내게 문제가되는 '내용'에 대한 '고정'의 조합입니다. 당신이 그것을 고치기를 원한다는 말입니까?하지만 그 CSS 규칙을 제 자리에 두어야합니까? – davidpauljunior

+0

@nothingisnecessary 페이지를 새로 고쳤습니까? 렌더 된 이미지 [여기] (http://i.stack.imgur.com/regPH.jpg)와 [코드 이미지] (http : //i.stack.imgur .com/DwJKW.png) –

답변

2

나는 이것이 native IE8에서만 발견되었으며, non-ascii는 나에게 영향을주지 않았다. 내가 .inner-text { display: inline-block; }을 제거하면

enter image description here

가 해결 : 스타일로

내가이 참조 설정

enter image description here

그리고 당신은 또한 .inner-text { display: inline-block; }뿐만 아니라 .wid { display: inline-block; }이있는 경우 수정.

enter image description here

마지막으로, 마지막 이미지는 여전히 문자없이 파산 표시합니다.

enter image description here

+0

고마워요. 안녕하세요와 세계 사이에 공백이 없으면 버그가 나타나지 않습니다. 공백으로 인해이 버그가 발생하고 비 ASCII 문자로 인해 일부 공간이 줄어들 수 있다고 생각합니다. –