问题本身仅在 IE8 标准模式下可见(我在 VMWare Player 上使用 IE8/WinXP VM),在 IE9+ 和其他浏览器中看起来正常。这是它在 IE8 中的样子:
它应该是这样的:
这是代码(没有背景图片,但它们不会改变任何东西):http://jsfiddle.net/pe6esnuw/6/
<table class="msgTable" cellspacing="0" cellpadding="0">
<tr>
<td class="msgTableTL"></td>
<td class="msgTableT" colspan="2"></td>
<td class="msgTableTR"></td>
</tr>
<tr>
<td class="msgTableL"></td>
<td class="msgTableContent" colspan="2">Content goes here blabla</td>
<td class="msgTableR"></td>
</tr>
<tr>
<td class="msgTableBL"></td>
<td class="msgTableB"></td>
<td class="msgTableBT"></td>
<td class="msgTableBR"></td>
</tr>
</table>
箭头( fiddle 中的灰色 block )应保持 42px 宽,左侧的 TD 元素应拉伸(stretch)以占据其余空间,但事实并非如此。这怎么能解决?气泡是灵活宽度的,因此硬编码 px 值不是一种选择。
附言为什么我必须在这里发布来自 fiddle 的相同代码?与大多数其他代码一样,如果没有视觉表示,它就毫无用处!
最佳答案
如果您只是在底部中间部分添加一个 div(42 像素宽和 20 像素高)并将其放在 msgTableBT 单元格中(现在 colspan 为 2)会怎样?在这里 fiddle :http://jsfiddle.net/q5wjzwLL/
<tr>
<td class="msgTableBL"></td>
<td class="msgTableBT" colspan="2"><div class="bg"></div></td>
<td class="msgTableBR"></td>
</tr>
您的 CSS 会略有变化:
.msgTable .msgTableBT {
background: #000000;
width: auto;
}
.bg
{
float: right;
width: 42px;
height: 20px !important;
background: #DDDDDD;
}
关于html - IE8 标准模式 - 表格列的奇怪行为 - TD 宽度有问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25292303/