1

我有一个 CSS 规则：

#map td {
    border: medium none;
    height: 32px;
    margin: 0;
    padding: 0;
    width: 32px;
}

我在一个名为map. 表格的每个单元格都应该包含一个大小为 32x32 像素的图像。但是当我在 Firefox 或 Chrome 中渲染它时，地图网格在某些情况下最终会被严重挤压。

在 Firebug 中检查它，我发现所有样式都正确应用，#map td样式是相关单元格的主要规则，但是当我查看“计算”选项卡时，它给出的width属性（在“盒子模型”下）为 14.6167像素。如果我展开width节点，它下面唯一的东西是: #map td 32 px，所以我有点不知所措是什么导致我的所有列都比 32 像素窄得多。

很抱歉，这没什么好说的，但我对 CSS 还是很陌生，所以我不知道很多正确的问题要问。有谁知道什么会导致这样的事情发生，我该如何处理？

更新： 经过一些试验，试图将其缩小到一个简单的、可重现的测试用例，似乎侧边栏 div 正在“挤压”主 div 并且没有足够的空间，所以浏览器正在制作主要的更窄，因为当我移除侧边栏时，一切都会恢复到正确的宽度。所以现在的问题是，我如何设置它，以便按照描述强制执行表格的宽度并且不能被其他元素挤压到它的一侧？

4

1 回答 1

1

保持你的 td/th 像你已经完成的那样定义宽度。

对于您的表格，将布局设置为固定，您还必须定义固定宽度。

table{
    table-layout: fixed;
    width: 64px;
    }
于 2013-10-03T17:35:00.633 回答