Question

我创建了一些css表。它适用于除IE8之外的所有内容吗？

<div class="main-table">
<div class="row">
    <a class="secondary-table" href="#">
        <div class="secondary-row">
            <div class="secondary-cell">
                $1000000000
            </div>
            <div class="secondary-cell">
                descrip<br /><span class="info">info</span>
            </div>
            <div class="secondary-cell" align="right">
                <button>View</button>
            </div>
        </div>
        <div class="secondary-row">
            <div class="secondary-cell">
                info
            </div>
            <div class="secondary-cell">
            </div>
            <div class="secondary-cell" align="right">
                <button>View</button>
            </div>
        </div>
    </a>
</div>

和CSS：

body {
    background-color: #f8f8f8;
}

.main-table {
    display: table; 
    border: 1px solid #dcdcdc;
    height: 700px;
    background: white;
    table-layout: fixed;
    width: 100%;
}

.secondary-cell:first-child {
    width: 80px;
    max-width: 80px;
    word-wrap: break-word;
}

.secondary-table {
    display: table;
    table-layout: auto;
    border-bottom: 1px solid #eee;
    width: 100%;
}

a.secondary-table:hover {
    background-color: #f9f9f9;
}

.secondary-row {
    display: table-row;
}


@media screen and (min-width: 768px) {

.secondary-row:last-child {
    display: none;
}

}

@media screen and (max-width: 768px) {

.secondary-row:first-child .secondary-cell:last-child {
    display: none;
} 

.info {
    display: none;
    }

}

.secondary-cell {
    display: table-cell;
    padding: 10px;
}

.row {
    display: table-row;
}

.cell {
    display: table-cell;
}

http://jsfiddle.net/t9YaL/1/

Answer 1

~~您已将<div>元素放在<a>个元素中。 anchor元素是一个内联元素，不能包含块元素，如divisions。~~

~~HTML5允许这样做，这就是新浏览器允许的原因，但IE8并不支持HTML5。~~

~~像IE8这样的老浏览器会尝试尽可能地纠正代码。这通常是通过在除法之前结束锚标记，或者将除法移出锚标记来完成的。~~

忘记这一点。原因很简单，你已经混合了表中的其他元素。表由表中的行中的单元格组成（并且行周围的表格标题/正文/页脚）。你不能在表格中的单元格或行周围有其他元素，任何其他元素都必须进入单元格内。

为什么我的桌子在IE8中坏了？

1 个答案: