我正在通过使用 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 的核心文件。