Mar*_*ery 6 html css html-table
我观察到一种好奇心,当应用于表格单元格时,浏览器(至少:Chrome,Firefox和Safari)如何处理max-width和width属性:如果单元格包含一个巨大的单词,那么width如果它尝试,则该属性将不会被尊重将单元格的宽度设置为小于包含单词所需的宽度.
也就是说,如果我写这个HTML,其中第一个表width的100px为100px,第二个表的100px max-width为100px,并且都包含一个巨大的单词,那么第一个表格渲染得非常宽,第二个表格被限制为100px:
<style>
td {
border: 1px solid; /* To help visualisation */
word-wrap: break-word;
}
</style>
<table>
<tr>
<td style="width:100px">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
</tr>
</table>
<table>
<tr>
<td style="max-width: 100px">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
</tr>
</table>
Run Code Online (Sandbox Code Playgroud)
为什么会这样?width在这种情况下应该受到尊重吗?是width和max-width浏览器之间的行为差异,还是由规范决定?在定义瞄了一眼width,并max-width在CSS 2级规范,CSS内在外在和浆纱模块级别3(下面的链接)似乎并没有立即表明在任何情况下都max-width应该得到尊重,但width忽视; 我错过了什么吗?
规格链接:
| 归档时间: |
|
| 查看次数: |
178 次 |
| 最近记录: |