Fix IE 디스플레이 연결된 img/footer nav

일부 새로운 CSS 규칙을 사용하고 있으므로 Footer Navigation이 올바르게 표시되는 데 어려움을 겪고 있습니다. 이 문제 외에도 IE 9에서는 내 IMG에 바깥 쪽 테두리가 표시됩니다 (링크 된 항목의 밑줄과 비슷합니다).Fix IE 디스플레이 연결된 img/footer nav

질문은 다음과 같습니다 :

왜 IE는 {텍스트 장식 IMG에도 불구하고 테두리를 만드는 : 없음; }?

푸터가 모두 우키요? 나는 무엇을 놓치고 있습니까? http://jsfiddle.net/misterizzo/fTe5Q/

< 

body> 
<div id="bg"> 
    <img style="display:block;" src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0015/1/-/-/-/-/Background_Gradient.png"> 
</div> 
<div id="main"> 
<div id="header"> 
    <div id="top-left"><a href="http://medata.com/"><img src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0019/1/-/-/-/-/Medata%20With%20Sub%20550x131.png" alt="Visit Medata Home Page" class="logo" title="Medata.com" atl="Logo"></a> 
    </div> 

    <div id="nav"> 
    <ul> 
     <li><a href="http://newsworthy.medata.com/" target="_blank"><span class="button">NewsWorthy</a> 
      </span> 
     </li> 
     <li><a href="#"><span class="button">Solutions</a> 
      </span> 
     </li> 
     <li><a href="#"><span class="button">About Us</a> 
      </span> 
     </li> 
     <li><a href="#"><span class="button">Home</a> 
      </span> 
     </li> 
    </ul> 
    </div> 

<div class="acton"> 
{{TEXT}} 
</div> 

<div id="footer"> 
<ul> 
     <li><a href="http://newsworthy.medata.com/" target="_blank"><span class="button">NewsWorthy</a> 
      </span> 
     </li> 
     <li><a href="#"><span class="button">Solutions</a> 
      </span> 
     </li> 
     <li><a href="#"><span class="button">About Us</a> 
      </span> 
     </li> 
     <li><a href="#"><span class="button">Home</a> 
      </span> 
     </li> 
    </ul> 
</div> 
</div> 



</div> 
</body>

모든 현재 FF와 크롬 브라우저에서 예쁘게 보여줍니다 (평소처럼)

감사 : 여기

내 jsfiddle입니다!

출처

2014-02-14 Misterizzo

첫 번째 질문 :

당신은 브라우저보다 일관된 동작하도록하기 위해 normalise.css를 사용해야합니다. http://necolas.github.io/normalize.css/

이 파일에서 필요한 비트입니다.

/** * IE 8/9에서 내부 a 요소 인 경우 테두리를 제거하십시오. */

img { 
    border: 0; 
}

두 번째 질문 : 당신의 바닥 글 UL 도움이

#footer ul { 
    width: 530px; 
}

희망의 폭을 증가

보십시오.

출처

2014-02-14 22:41:37 Mayko

"img {...}"가 아니라 "img {...}"태그가있는 경우에만 테두리를 제거하면됩니다. – arieljuod

글쎄, 둘 다 작동합니다! 이것이 브라우저가 img 태그를 처리하는 방법입니다. 그렇다면 모든 브라우저에서 전역 적으로 재설정하지 않는 이유는 무엇입니까? – Mayko

그가 CSS의 끝에 그 스타일을 넣으면 어쩌면 그는 그가 실제로 원하는 국경을 다시 설정합니다. 'img'는 더 안전하지만 그래, 둘 다 작동 할 것입니다. – arieljuod

Fix IE 디스플레이 연결된 img/footer nav

답변

관련 문제