1. 首页
  2. 问答
  3. 样式定义列表 - IE清除：错误

样式定义列表 - IE清除：错误

2010-05-07 16 views
6

我试图正确地定义一个定义列表的样式。到目前为止，我已经在Firefox 3.5和IE 8中获得了我想要的风格，但是我无法让IE6和IE7正常运行......我已经尝试过任何可能想到的破解和欺骗手段。样式定义列表 - IE清除：错误

这似乎是“明确：既”关于DT不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>

来源

2010-05-07 Andrea

+1

难道你把这个在网上为我们好吗？ – Tom 2010-05-07 12:16:37

+0

这是所有内容，真的......标记和CSS。然而，是否有任何允许上传小代码片段的在线工具，您推荐？ – Andrea 2010-05-10 09:03:22

+2

你试图做的不是一个清单，而是一张表。使用一张桌子。 – 2010-10-06 12:05:00

回答

0

尝试增加position到元素，absolute为dl和relative为dt。它可能工作..

来源

2010-05-07 12:03:02 Kyle

0

如果您遇到的问题是，一些要素似乎是“向上浮动”，然后在这里是一个不愉快的黑客，你可以尝试：把<div>有“明确：既”的结束之间<dd>和下一个<dt>。我知道这听起来很愚蠢，当然它也是HTML的破碎，但是我发现这是唯一一个在标记中设置“屏障”以防止东西向上浮动的东西。

来源

2010-05-07 12:38:51 Pointy

+0

呃...是的，它可能会工作。然而，我很好，在CSS中的黑客和解决方法，但我不想搞乱页面的标记。 :) – Andrea 2010-05-07 13:55:34

+0

@Andrea，我说这很不愉快。我一直没有找到任何替代品，所以我会在这里关注你的问题！ – Pointy 2010-05-07 23:55:00

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。

例如

<dl class"clear">

来源

2010-05-12 02:15:39 corroded

+0

不幸的是，这里的问题是不同的... dt和dd是不能够清除他们自己，因为他们应该...问题不在于包含dl，而是在内部元素... – Andrea 2010-05-14 13:25:14

+0

哦是啊，这样做意味着你真的必须坚持这个标记？我认为如果你使用嵌套列表的方式，它仍然是好的（和语义）标记： dt至多有一个dd。如果dt有很多定义，请使用无序列表将其全部列出。 – corroded 2010-05-15 05:23:58

0

这应该工作，我已经添加了一些背景颜色，所以你可以看到发生了什么。您将不得不为每个第一个dd添加一个类，并且使用各种“宽度”来适应您的设计。

<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 { background-color:orange;width: 400px; } 
    .aligned dt {background-color:grey;clear:both;float: left; margin: 0 0 0.5em 0; width:150px} 
    .aligned dd {background-color:olive;clear:left;float: left; margin: 0 0 0.5em 150px; width: 190px; } 
.aligned dd.first {clear: none;margin-left:0} 

</style> 
    </head> 
    <body> 
<div id="main"> 
    <dl class="aligned"> 
    <dt>First title</dt> 
    <dd class="first">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 class="first">3.0 definition</dd> 
    <dt>Fourth title - very long to test wrapping</dt> 
    <dt>Fifth title</dt> 
    <dt>Sixth title</dt> 
    <dd class="first">6.0 definition</dd> 

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

来源

2010-07-26 12:21:07 lupalz

0

我认为这里更好的解决方案是关于更改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>

来源

2010-11-09 11:23:55 bluantinoo

0

这适用于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>

来源

2010-11-13 00:09:29 juddlyon

1

对于那些谁也碰到过这样的寻找解决的办法，我有一些单<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>元素，这种情况会非常糟糕，这就是为什么我注意到它只适用于成对元素。*

来源

2011-06-27 06:38:32 pnomolos

0

我会说整个代码都坏了。正如@NickPyett在评论中所说的那样，它应该被格式化为一张表格。

没有必要的黑客和一切都显示为所需。

th { 
 
    text-align: left; 
 
}
<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>

来源

2016-05-18 07:45:25 tomasz86

相关问题

 相关问题