代码之家 › 专栏 › 技术社区 › Andrew

IE 7中的无序列表

internet-explorer css

Andrew · 技术社区 · 16 年前

哦,我还注意到,通过注释下面设置某些元素宽度的两行,无序列表的问题就消失了。但是我没有把网页放在浏览器中间,我需要。。。

不管怎样,有什么方法可以使这个显示在IE7中与IE8中相同吗?

<!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">
        *
        {
            font-family: Arial, Helvetica, Veranda, sans-serif;
            padding: 0px;
            margin: 0px;
        }

        #PageWrapper
        {
            width: 840px; /* Commenting out these two lines fixes the unordered list. */
            margin-right: auto;
            margin-left: auto;
            font-size: 0.96em;
        }


        #MainContentWrapper
        {
            position: relative;
            width: 800px; /* Commenting out these two lines fixes the unordered list. */
            min-height: 400px;
            margin-top: 10px;
            margin-bottom: 20px;
            padding: 20px;
            background-color: White;
            line-height: 1.2em;
        }

        /*
ol, ul
{
    padding-left: 1.0em;
    margin-left: 1.0em;
}
*/

        .CategoryDetailsMCWrapper
        {
            clear: both;
            margin-left: 20px;
            margin-right: 20px;
            margin-bottom: 20px;
            padding-top: 20px;
        }

        .CategoryDetailsWrapper
        {
            clear: both;
            display: inline-block;
        }

        .EntryLabel
        {
            clear: left;
            width: 130px;
            float: left;
        }

        .EntryDataItem
        {
            float: left;
            max-width: 570px;
            margin-left: 0px;
            padding-left: 20px;
            border-left: 1px solid #AAAAAA;
        }

        .EntryRowBottomBorder
        {
            display: inline-block;
            clear: left;
            float: left;
            border-bottom: 1px solid #AAAAAA;
        }
    </style>
</head>
<body>
    <form method="post">
    <div id="PageWrapper">
        <div id="MainContentWrapper">
            <div class="CategoryDetailsMCWrapper">
                <h3>
                    Heading</h3>
                <div class="CategoryDetailsWrapper">
                    <div class="EntryRowBottomBorder">
                        <div class="EntryLabel">
                            List 1:
                        </div>
                        <ul class="EntryDataItem">
                            <li>Different wavelengths of light that allow people to see. </li>
                        </ul>
                    </div>
                    <div class="EntryRowBottomBorder">
                        <div class="EntryLabel">
                            List 2:
                        </div>
                        <ul class="EntryDataItem">
                            <li>A rainbow has many colors. </li>
                            <li>Before movies had color, they were "black and white". </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

安得烈

2 回复 | 直到 16 年前

Moin Zaman 16 年前

最佳实践是为任何要浮动的元素提供一个宽度。以%年龄或单位表示。

一种方法是给父容器100%的宽度。请参阅此处的工作示例: http://jsbin.com/uteko3/3

我用了一个 doctype transitional 不会。

Emil Orol 16 年前

类似于:

<ul class="menu>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>

.menu {float: left; width: 100px;}

注意:在IE上运行之后,也要在其他浏览器上检查。