html - 表格形式的数据溢出IE 8中的div，表格中断

Question

我有一个使用 div 创建的表格，每个表格都应用了不同的类。当任何列中的数据超过一行时，表结构就会扭曲，一切都会变得困惑。

Chrome 和 Firefox 会自动扩展行高以容纳数据。问题仅出在 Internet Explorer 8 上。

我附上下面的代码。请提供您的意见。

谢谢

html 在这里:

<fieldset>
    <div class="ListHead" id="list_div">
        <a class="ListItem col1" href="sort.do">
        <a class="ListItem col2" href="sort.do ">
        <a class="ListItem col3" href="sort.do">
        <a class="ListItem col4" href="sort.do">
        <a class="ListItem col5" href="sort.do">
    </div>
    <div class="ListRow0">
        <a class="ListItemRow col1" href="dosomething">
        <span class="ListItem col2">
        <span class="ListItem col3">
        <span class="ListItem col4">
        <span class="ListItem col5">
    </div>
    <div class="ListRow1">
        <a class="ListItemRow col1" href="dosomething">
        <span class="ListItem col2">
        <span class="ListItem col3">
        <span class="ListItem col4">
        <span class="ListItem col5">
    </div>
    <div class="ListRow0">
        <a class="ListItemRow col1" href="dosomething">
        <span class="ListItem col2">
        <span class="ListItem col3">
        <span class="ListItem col4">
        <span class="ListItem col5">
    </div>
    <div class="ListRow1">
        <a class="ListItemRow col1" href="dosomething">
        <span class="ListItem col2">
        <span class="ListItem col3">
        <span class="ListItem col4">
        <span class="ListItem col5">
    </div>
</fieldset>

这是 CSS:

fieldset {
    margin: 0.5em 0 0 0;
    padding: 0.5em 0 0 0;
    border: 1px solid #bdc1c2;
    font-family: Tahoma, Arial, sans-serif;
    color: #09072c;
    background-color: #f1f2f6;
    background-image: url(../image/BannerGifs/fieldset_grad.jpg);
    background-repeat: repeat-x;
    font-size: 0.75em;
}

.ListHead {
    text-align: left;
    width: 100%;
    color: #09072c;
    font-weight: bold;
    padding: 5px;
    overflow: hidden;
}
.ListRow0 {
    background-color: white;
    color: #09072c; 
    border: 1px solid #c3c3c3;
    padding: 5px;   
    overflow: hidden;
    font-size: 0.75em;
    font-family: Tahoma, Arial, sans-serif;
}

.ListRow1 {
    background-color: #fbf9fb;
    color: #09072c; 
    border: 1px solid #c3c3c3;
    padding: 5px;   
    overflow: hidden;
    font-size: 0.75em;
    font-family: Tahoma, Arial, sans-serif;
}
.ListItem {
    padding: 0 0.5em;
    margin: 0;
    vertical-align: top;
    word-wrap: break-word;
    display: block;
    float: left;
    overflow: hidden;
}
.col1 {
    width: 10%;
}
.col2 {
    width: 15%;
}
.col3 {
    width: 15%;
}
.col4 {
    width: 30%;
}
.col5 {
    width: 15%;
}

Answer 1

只是用简单的表格标签替换了使用 div 创建的表格。

试图保留现有代码。经过一段时间的努力后，决定用代码替换所有此类表格数据表。

所有问题都解决了。