0

我正在通过使用 html 无序列嵌套列表创建一个类似表格的表格，使用 css 进行样式设置以使其看起来像表格。现在它在Firefox中看起来完全符合我的要求，但在IE8中看起来很糟糕。（抱歉，我没有足够的声誉来发布图片来向您展示差异，请参阅下面的代码）。

HTML代码如下：

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div>
    TODO write content
</div>
<ul>
    <li>
    <div class="box">
        <div class="title">
            My Categories
        </div>
        <div class="description">
            My Categories
        </div>
    </div>
    <ul>
        <li>
        <div class="box">
            <div class="title">
                Fun
            </div>
            <div class="description">
                Fun
            </div>
        </div>
        <ul>
            <li>
            <div class="box">
                <div class="title">
                    Sport
                </div>
                <div class="description">
                    Sport
                </div>
            </div>
            <ul>
                <li>
                <div class="box">
                    <div class="title">
                        Surfing
                    </div>
                    <div class="description">
                        Surfing
                    </div>
                </div>
                </li>
                <li>
                <div class="box">
                    <div class="title">
                        Extreme knitting
                    </div>
                    <div class="description">
                        Extreme knitting
                    </div>
                </div>
                </li>
            </ul>
            </li>
            <li>
            <div class="box">
                <div class="title">
                    Friends
                </div>
                <div class="description">
                    Friends
                </div>
            </div>
            <ul>
                <li>
                <div class="box">
                    <div class="title">
                        Gerald
                    </div>
                    <div class="description">
                        Gerald
                    </div>
                </div>
                </li>
                <li>
                <div class="box">
                    <div class="title">
                        Gwendolyn
                    </div>
                    <div class="description">
                        Gwendolyn
                    </div>
                </div>
                </li>
            </ul>
            </li>
        </ul>
        </li>
        <li>
        <div class="box">
            <div class="title">
                Work
            </div>
            <div class="description">
                Work
            </div>
        </div>
        <ul>
            <li>
            <div class="box">
                <div class="title">
                    Reports
                </div>
                <div class="description">
                    Reports
                </div>
            </div>
            <ul>
                <li>
                <div class="box">
                    <div class="title">
                        Annual
                    </div>
                    <div class="description">
                        Annual
                    </div>
                </div>
                </li>
                <li>
                <div class="box">
                    <div class="title">
                        Status
                    </div>
                    <div class="description">
                        Status
                    </div>
                </div>
                </li>
            </ul>
            </li>
            <li>
            <div class="box">
                <div class="title">
                    Trips
                </div>
                <div class="description">
                    Trips
                </div>
            </div>
            <ul>
                <li>
                <div class="box">
                    <div class="title">
                        National
                    </div>
                    <div class="description">
                        National
                    </div>
                </div>
                </li>
                <li>
                <div class="box">
                    <div class="title">
                        International
                    </div>
                    <div class="description">
                        International
                    </div>
                </div>
                </li>
            </ul>
            </li>
        </ul>
        </li>
    </ul>
    </li>
</ul>
</body>
</html>

CSS：

.box {
    border: 1px solid #BBBBBB;
    border-radius: 4px 4px 4px 4px;
    margin: 10px;
    width: 200px;
    position: relative;
    padding: 10px;
    color: #333333;
    font-weight: normal;
    min-width: 0;
    text-decoration: none;
    text-shadow: 0 1px 0 #FFFFFF;
    background: #e6e49f;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 1px rgba(0, 0, 0, 0.2);
}
.title {
    width: 100%;
    font-weight: bolder;
}
.description {
    width: 100%;
    font-size: medium;
}
li,
ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
ul {
    line-height: 38em;
    position: relative;
}
ul ul {
    line-height: 18em;
    position: absolute;
    left: 200px;
    top: 0;
}
ul ul ul { line-height: 8em }
ul ul ul ul { line-height: 3em }
ul li { position: relative }

我试图在这个问题上研究很多关于 CSS 的一周，并认为“line-Height”是问题，因为它在 IE8 中看起来很尴尬。我研究了IE8版本应该能够满足无序列表的问题。

任何人都可以给我一些想法如何解决这个问题？或者我可以用来替换“行高”的任何东西？我还是想提醒 unorderedlisted( <ul>) 只用 css，不，<div>因为我不想改变 cakephp 的核心文件。

4

1 回答 1

1

感谢@ZippyV 提醒我<!DOCTYPE>只需在标签前添加一行代码就可以声明它<html>，以便浏览器进入标准模式并且 html 是有效的。

现在 IE8 显示它与 firefox 完全一样。

于 2012-05-23T02:56:30.423 回答