정렬되지 않은 목록의 CSS 문제 (보통 IE와 동일)

화면에 원하는 출력을 표시하기 위해 일부 div를 중첩하는 정렬되지 않은 목록을 사용하고 있습니다. 나는 CSS 스타일을 사용하고 있으며 크롬과 파이어 폭스에서 완벽하게 보입니다. 하지만 IE (8)에서 찾을 수없는 문제가있는 것 같습니다.정렬되지 않은 목록의 CSS 문제 (보통 IE와 동일)

나는이 크롬의 출력과 불꽃 놀이 alt text http://haberhavadis.com/chff.jpg

을 생산하는 다음과 같은 HTML

<div class="ur_container"> 
    <ul class="bx_grp" id="grp_1"> 
     <li> 
      <div class="bx_grp_header"> 
       <span class="bx_grp_title">Personal File</span> 
       <span class="bx_grp_options"><a href="#">rename</a> &bull; <a href="#">make private</a> &bull; <a href="#">hide</a href="#"> &bull; <a href="#">delete</a></span> 
       <div style="clear: both;"></div> 
      </div>  
     </li> 
     <li> 
      <ul class="bx_lnx" id="lnx_1"> 
       <li> 
        <div class="bx_lnx_header"> 
         <span class="bx_linx_title"><span class="bx_lnx_refno">#3103</span>How to file personal files</span> 
         <span class="bx_lnx_options"><a href="#">edit</a> &bull; <a href="#">move</a> &bull; <a href="#">delete</a></span> 
        </div> 
       </li> 
       <li class="bx_lnx_url">http://www.google.com</li> 
       <li class="bx_lnx_notes"><span>search google for this</span></li> 
       <li class="bx_lnx_tags"><span>personal</span><span>file</span><span>google</span></li> 
      </ul>  
     </li> 
    </ul> 
</div>

에 대해 CSS

<style type="text/css"> 
     .ur_container {width:980px; padding: 0; margin: 0;} 
     .ur_container ul.bx_grp {list-style-type: none; padding: 0px; margin: 0px; } 
     .ur_container ul.bx_lnx {list-style-type: none; padding: 5px; margin: 0px; } 

     .bx_grp {border:1px solid #c5c5c5; background-color: yellow; margin:0; padding:0;} 
     .bx_grp_header {background-color: #d6d6d6; border-bottom:1px solid #acacac;} 
     .bx_grp_title {float: left; font: bold 11px Arial; padding:5px;} 
     .bx_grp_options {float: right; font: 10px Arial; padding: 5px;} 
     .bx_grp_options a{color: #125B93; text-decoration: none; }   

     .bx_lnx {padding:0px; background-color: red;} 
     .bx_lnx_header {font:11px Arial; color:#333;} 
     .bx_lnx_title {float: left;} 
     .bx_lnx_refno {background-color:#333; color: fff; padding: 1px; margin-right: 5px; } 
     .bx_lnx_options {float: right;} 
     .bx_lnx_options a {color: #258CF4; text-decoration: none;} 
     .bx_lnx_url {font: 9px Arial; color: #999; margin-top: 4px; } 
     .bx_lnx_notes {} 
     .bx_lnx_notes span {background-color: #FDFFCC; color: #666; font: 9px Arial; padding:2px;} 
     .bx_lnx_tags {} 
     .bx_lnx_tags span {background-color: #efefef; border-bottom: 1px solid #ccc; color: #666; font: 9px Arial; padding: 1px 2px 1px 2px; margin-right: 5px;} 
    </style>

아래 사용하고 있습니다와 IE에서 alt text http://haberhavadis.com/IE.jpg

황색과 적색이 잘못되었음을 나타 내기 위해 사용되었습니다. 노란색 부분은 원하지 않는 부분입니다.

누구나 올바른 방향으로 나를 가리킬 수 있습니까?

감사

출처

2010-05-12 Kemal Emin

어떤 doctype을 사용하고 있습니까? –

실제로 doctype을 사용하지 않습니다. 그게 문제가 되겠습니까? –

Doctype이 없다면 일반적으로 IE <= 7이 단조 로움 모드로 렌더링됩니다. IE 8이 유효한 Doctype없이 수행 할 작업을 잘 모르겠습니다. –

~~이것은 여러 가지 방법을 트리거 할 수 있습니다 IE7 문서 모드에서 IE8 렌더링처럼 보인다.~~

(OP 더 DOCTYPE이 사용중인 댓글을 달았 후 업데이트되었습니다.)

DOCTYPE이 페이지가 쿼크 모드로 렌더링하게됩니다 생략. What happens in Quirks Mode?을 참조하십시오.이 작업은 자유롭게 수행 할 수 있지만이 대답은 DOCTYPE을 추가하여 페이지가 표준 모드로 렌더링되도록합니다. 이 방법으로 가고 싶은 경우 스스로 결정할 수 있습니다 (Choosing the right doctype for your HTML documents 참조.)

가 나도 HTML 엄격한 4.01를 제안 ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

... 또는 HTML 5를 ...

<!DOCTYPE html>

... 그리고 validator을 사용하면 마크 업 오류를 포착 할 수 있습니다. 이제 우리는 표준 모드로 렌더링되는

, 우리는 요소의 width이 border의 포괄적 인 W3C box model 및 padding 아닌 margin를 사용할 수 있습니다.

표준 모드로만 가면 IE8에서 볼 수있는 차이가 있지만 표준 모드에서도 IE7에서 볼 수 있습니다. 브라우저 버그입니다. 고정 너비를 사용하기 때문에 ( ~~가정하면 표준 모드에서~~ 표준 모드로 간다) 간단한 수정이 한 가지 있습니다.10px (.ur_container ul.bx_lnx 각 측 5px 패딩) = - 은 (.bx_grp에서 양쪽 테두리 1 픽셀) 2 픽셀 -

#lnx_1 {width: 968px;}

968px의 폭은 980 픽셀 (.ur_container 폭) 에서 유래 968px.

이 특정 IE 목록 항목 버그 수정에 대한 자세한 내용은 this page을 참조하십시오. 표준 모드로 갈 때

은 또 다른 변화가 필요합니다

.bx_lnx_refno {background-color:#333; color: fff; padding: 1px; margin-right: 5px; }

color: fff 부분은 파운드 기호없이 유효하지 않습니다; color: #fff

이 원하는 것보다 한 줄 낮 으면 표준 모드로 변경하면 IE8의 첫 줄에 계속 표시되지만 IE7에는 표시되지 않습니다.
<a href="#">edit</a> • <a href="#">move</a> • <a href="#">delete</a> #3103How to file personal files

는 이런 일이 발생하는 이유에 대한 통찰력에 대한 this answer보기 ...이 문제를 해결 할 소스 순서 변경.

출처

2010-05-12 18:43:36

고마워, 일부 문제가 해결되었습니다. 1) 상단 간격이 제거되었지만 오른쪽에 약간의 간격이 있습니다. 왼쪽으로 떠있는 는 여전히 혼자 두어야합니다 (빨간색 상자의 오른쪽 상단 모서리에있는 chorme 및 firefox 이미지 참조). 그게 어떤 아이디어 야? 2) 어떻게 "968px"를 계산 했습니까? 3) 나는 당신이 제안한 링크를 방문했지만 훨씬 더 단순한 레이아웃이라고합니다. 제 경우에는 더 복잡하고 무엇이든 IE에서 레이아웃을 엉망으로 만들었습니다. 반면에 다른 곳에서 수정했거나 그 반대의 경우도 마찬가지였습니다 ... –

@Emin 질문에 대한 대답과 내 대답을 업데이트했습니다. DOCTYPE –

내 문제를 해결하기 위해 시간과 노력을 들여 주셔서 감사합니다. 이제는 모든 것이 잘 작동하며 이제는 더 많은 종류의 doctypes 및 기타 문제를 알고 있습니다. 언젠가 나는 또한 전문가가되어 다른 사람들을 도울 수 있기를 바란다. @ricebowl. 답변 해 주셔서 감사합니다. DOCTYPE이 얼마나 중요했는지 (또는 필요한지) 알지 못했습니다! –

정렬되지 않은 목록의 CSS 문제 (보통 IE와 동일)

답변

관련 문제