私は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 }
私はこの問題について 1 週間 CSS について多くのことを調査しようとしましたが、IE8 ではぎこちなく見えたため、「行の高さ」が問題であると考えました。私は、IE8 バージョンが順序付けられていないリストの問題に対応できるはずであることを調査しました。
誰でもこれを解決する方法を教えてもらえますか? または、「行の高さ」を置き換えるために使用できるものはありますか? Cakephp のコア ファイルを変更したく<ul>ないので、css のみでunordered Listed( ) を思い出させたいと思います。<div>