2
4

6 回答 6

1

这绝对是 box-sizing:border-box 属性的问题。我的猜测是，将其放在表格单元格中（与 div 的处理方式不同）会使浏览器感到困惑。通常，新技术+旧技术不会混合在一起。

我建议执行以下操作：

table td a {
  background-color: orange;
  display: block;
  height: 100%;
  padding: 8px;
}

不需要 width:100% ，因为表格单元格已经扩展到文本宽度 + 填充宽度。出于某种原因，它似乎没有使用表格单元格将填充添加到 100% 的高度（看图，表格很奇怪！哈哈）。如果您需要将其扩展到更大的表格单元格宽度，我建议将宽度：100% 放回去，然后放弃水平填充（即，放置填充：8px 0px;）。

于 2013-07-25T05:17:35.757 回答
0

据我认为它是导致此问题的 box-sizing 属性，请将您的 css 更改为：

table td a {
   background-color: black;
   height: 100%;
   display:block;
   margin: 0;
   padding: 0px;
   width: 100%;
   padding-top: 12px;
 }

希望有帮助；

于 2013-07-25T05:09:31.193 回答
0

尝试将高度设置px为a

table td a {
  background-color: orange;
  box-sizing: border-box;
  display: block;
  height: 50px;
  padding: 8px;
  width: 100%;
}
于 2013-07-25T05:19:59.423 回答
0

将此代码添加到表 td：

display:inline-block;

因为在盒子建模中表格和分区之间存在一些差异。

您必须在任何非块元素上设置 display-block 才能应用盒模型样式。

于 2013-07-25T05:21:44.883 回答
0
于 2013-07-25T05:43:23.820 回答
0

我认为这是一个错误，我前段时间遇到了同样的问题，如果您希望文本在中间垂直对齐，而不是display:block在<a>标签上使用display:table并使用border-spacing而不是padding，像这样：

table td a {
  background-color: orange;  
  display: table;
  height: 100%;
  border-spacing: 8px 13px;
}

我也删除了 width:100% 因为它会默认执行此操作，您可以在此处查看示例。 border-spacing是 的 CSS 属性cellpadding。

于 2013-07-25T06:02:58.867 回答