Question

我无法在IE 7中正确显示以下页面。它在IE 8，Mozilla Firefox和Google Chrome中运行良好。唯一的问题是在IE 7中，无序列表的宽度导致列表项不必要地换行到下一行。任何帮助将非常感谢。

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

无论如何，是否有一些方法可以在IE 7中以与IE 8中显示的相同的方式进行显示？

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

非常感谢提前！

安德鲁

Answer 1

最佳做法是给要浮动的任何元素，宽度。无论是年龄还是单位。

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

另一种方法是使用标签和项目的％年份重做布局。

我使用了doctype来确保最佳的跨浏览器兼容性。 transitional不会。

Answer 2

您可以在其中添加一个类，然后为其设置宽度和浮动方向吗？

类似的东西：

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

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

注意：在IE上运行后，请确保在其他浏览器上进行检查。

IE 7中的无序列表

2 个答案: