IE7 定义列表 - 对齐问题答案

【问题标题】：IE7 Definition List - Alignment IssueIE7 定义列表 - 对齐问题
【发布时间】：2011-11-10 23:43:57
【问题描述】：

我在 Internet Explorer 7（还有 Internet Explorer 5.5 和 6，但如果我能在 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>

【问题讨论】：

如果您需要 IE6/7 兼容性而不依赖黑客技术，table 会做得更好。只需使用<table><tr><th scope="row">Country:</th><td>Canada</td></tr> 等等。

标签： css list internet-explorer-7 internet-explorer-6 definition

【解决方案1】：

移除 clear:left 并为 dl 添加宽度。工作示例：

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

代码：

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

【讨论】：