样式定义列表 - IE清除:两个bug

Question

样式定义列表 - IE清除:两个bug

我正在尝试正确设置定义列表的样式.到目前为止,我已经在Firefox 3.5和IE 8中得到了我想要的风格,但我无法让IE6和IE7正常运行......我已经尝试过任何一种我能想到的黑客和技巧.

似乎dt中的"clear:both"在IE <= 7中不起作用...

下面是我正在使用的"测试页面".定义列表的标记是建立在目的上的:我想测试不同的场景,例如多个定义或空的定义.

在Firefox> 3.5中查看它,看看它应该是什么样子.

干杯!!!

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title></title>
 <style type="text/css">
  body { font-family: Arial; font-size: 62.5%; }
  * { margin: 0; padding: 0; }
  #main { font-size: 1.4em; }
  dt { font-weight: bold; }
  hr { clear: both; }

  dl.aligned { width: 300px; }
  .aligned dt { clear: both; float: left; margin: 0 0 0.5em 0; width: 100px; }
  .aligned dd { clear: right; float: right; margin: 0 0 0.5em 10px; width: 190px; }

 </style>
  </head>
  <body>
 <div id="main">
  <dl class="aligned">
   <dt>First title</dt>
   <dd>1.1 definition</dd>
   <dd>1.2 definition - very long to test wrapping</dd>
   <dd>1.3 definition</dd>
   <dt>Second title</dt>
   <dd></dd>
   <dd></dd>
   <dt>Third title</dt>
   <dd>3.0 definition</dd>
   <dt>Fourth title - very long to test wrapping</dt>
   <dt>Fifth title</dt>
   <dt>Sixth title</dt>
   <dd>6.0 definition</dd>

  </dl>
 </div>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Kyl*_*yle 0

尝试添加position到您的元素，absolutefordl和relativefor the dt。它可能会起作用..

归档时间：	15 年，8 月前
查看次数：	6118 次
最近记录：	9 年，8 月前