IE7 정의 목록 - 정렬 문제

Internet Explorer 7 (인터넷 익스플로러 5.5 및 6)에서도이 정의 목록에 정렬 문제가 있습니다. ie7에서 작동하게해도 기쁠 것입니다.IE7 정의 목록 - 정렬 문제

스크린 샷 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <style type="text/css"> 
     .details dt { 
      clear: left; 
      float: left; 
      width:100px; 
      margin: 0; 
      font-family:verdana; 
      font-size:10px; 
      font-weight: bold; 
     } 
     .details dd { 
      float: left; 
      margin: 0; 
      font-family:verdana; 
      font-size:10px; 
     } 
    </style> 
</head> 
<body> 
    <dl class="details"> 
     <dt>Country:</dt> 
     <dd>Canada</dd> 

     <dt>State:</dt> 
     <dd>Alberta</dd> 
     <dt>City:</dt> 
     <dd>Calgary</dd> 
     <dt>District:</dt> 
     <dd>Downtown</dd> 

     <dt>Street:</dt> 
     <dd>Main St</dd> 
    </dl> 
</body> 
</html>

출처

2011-11-10 BobJIII

앞에'. '

등을 사용하십시오. – tomasz86

답변

분명히 제거는 : 왼쪽 DL을 위해 폭을 추가 할 수 있습니다. 작업 예 :

http://jsfiddle.net/sFxcE/1/

코드 : 당신이 해커에 의존하지 않고 IE6/7의 호환성을 필요로하는 경우 더 잘 할 것 table`

<head> 
      <style type="text/css"> 
      .details dt { 

      float: left; 
      width:100px; 
      margin: 0; 
      font-family:verdana; 
      font-size:10px; 
      font-weight: bold; 
      } 

      .details dd { 
      float: left; 
      margin: 0; 
      font-family:verdana; 
      font-size:10px; 
      } 
      .details 
      { 
      width:200px; 
      } 


      </style> 


      </head> 

      <body> 

      <dl class="details"> 
      <dt>Country:</dt> 
      <dd>Canada</dd> 

      <dt>State:</dt> 
      <dd>Alberta</dd> 
      <dt>City:</dt> 
      <dd>Calgary</dd> 
      <dt>District:</dt> 
      <dd>Downtown</dd> 

      <dt>Street:</dt> 
      <dd>Main St</dd> 
      </dl> 


      </body> 
      </html>

출처

2011-11-10 23:55:31 user194076

지금 다시 작동 해 주셔서 감사합니다. – BobJIII

IE7 정의 목록 - 정렬 문제

답변

관련 문제