Question

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

似乎dt上的“clear：both”在IE中不起作用＆lt; = 7 ...

以下是我正在使用的“测试页面”。定义列表的标记是建立在目的上的：我想测试不同的场景，例如多个定义或空的定义。

在Firefox中检查＆gt; 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>

Answer 1

您是否尝试过明确修复？

我通常将这个修复程序用于我的所有项目，所以我只是为它创建了一个单独的样式表：

/* float clearing for IE6 */
* html .clear {
  height: 1%;
  overflow: visible; }

/* float clearing for IE7 */
*+html .clear {
  min-height: 1%; }

/* float clearing for everyone else */
.clear:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden; }

将其保存为clear.css并将其包含在您的标记中（或者您可以将其包含在样式表中）。然后使用，只需在浮动元素的父容器中添加一个清除类，在本例中为dl。

e.g。

<dl class"clear">

Answer 2

对于那些寻找解决方案的人来说，我有一些适用于单<dt> / <dd>对的东西（假设这两个元素的宽度加起来就是<dl>。

上面提到的css适用于所有浏览器，但IE7。对于IE7，请使用以下内容：

.ie7 #home .news dt,
.ie7 #home .news dd {
    float: none;
    display: inline;
    zoom: 1;
    vertical-align: top;
}

注意：我正在使用条件注释以这种方式定位IE7。使用您最喜欢的IE7定位方法是将这些规则发送给它。我知道如果你添加多个<dd>元素，这会分崩离析，这就是为什么我注意到它只适用于元素对。*

Answer 3

尝试为您的元素添加position，为absolute添加dl，为relative添加dt。它可能有用......

Answer 4

如果您遇到的问题是某些元素似乎“向上浮动”，那么您可以尝试这是一个令人不快的黑客攻击：在{{的结尾处放置<div>并使用“clear：both” 1}}和下一个<dd>。我知道这听起来很愚蠢，当然它是破碎的HTML，但它是我发现的唯一一个在标记中设置“障碍”以防止东西浮动的东西。

Answer 5

我认为这里更好的解决方案是改变html结构。如果你制作不同的dl.aligned块 - 而不是只有一个 - 那么实现你想要的东西非常简单。

<dl>
 <dt></dt>
 <dd></dd>
 <dd></dd>
</dl>

<dl>
 <dt></dt>
 <dd></dd>
 <dd></dd>
</dl>

<dl>
 <dt></dt>
 <dd></dd>
</dl>

Answer 6

这适用于IE7，在IE6中未经测试。根据需要调整。 Adapted from here.

   <!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>

 <!--[if lt IE 8]>

  <style type="text/css">
    .aligned dt { float: left; clear: left; margin: 0 0 0.5em 0; width: 100px; }
    .aligned dd { clear: none; float: none; margin: 0 0 0 100px; width: 190px; }
    .aligned dt:after { content: ":"; } 
  </style>

 <![endif]--> 

  </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>

Answer 7

我会说整个代码都被打破了。正如@NickPyett在评论中所说，它应该被格式化为表格。

不需要黑客攻击，所有内容都会根据需要显示。

＆＃13;

th {
  text-align: left;
}

＆＃13;

<table>
  <tr>
    <th scope="rowgroup" rowspan="3">First title</th>
    <td>1.1 definition</td>
  </tr>
  <tr>
    <td>1.2 definition - very long to test wrapping</td>
  </tr>
  <tr>
    <td>1.3 definition</td>
  </tr>
  <tr>
    <th scope="row">Second title</th>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">Third title</th>
    <td>3.0 definition</td>
  </tr>
  <tr>
    <th scope="row">Fourth title - very long to test wrapping</th>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">Fifth title</th>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">Sixth title</th>
    <td>6.0 definition</td>
  </tr>
</table>

＆＃13;

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

8 个答案: