Question

我正在浏览我的样式表，试图使我的CSS友好，我因为某些原因遇到填充问题。它只将填充应用于我的'span'标签中的第一行文本。当文本运行到下一行时，它会一直向左移动到'span'元素内部。

（无法显示NDA用途的屏幕截图）

浏览器：IE7

CSS：

#rightContent .rightNav a,#rightContent .rightNav a:visited{
  color:black;
  display:block;
  width:92px;
  padding-right:12px;
  height:35px;
  background:url("../images/nav_off.png");
}
#rightContent .rightNav span{
  display:table-cell;
  vertical-align:middle;
  height:28px;
  padding-left:13px;
  font-size:9px;
}

HTML：

<li>
  <a href="">
    <span>This text is too long.</span>
  </a>
</li>

Answer 1

IE7不支持display: table-cell：http://caniuse.com/css-table

如果只是针对IE7，你必须找到另一种技术。

尝试将*float: left添加到span - 它将only apply添加到IE7及更低版本。也许这将是一个“足够好”的修复。

您似乎正在使用display:table-cell; vertical-align:middle进行垂直居中。如果它在IE7中具有绝对重要，那么可以在不使用JavaScript的情况下实现它，但这对于屁股来说是一种痛苦。

Answer 2

这似乎与这里提出的问题相似：Why Doesn't IE7 recognize my css padding styles on anchor tags?我不确定为什么会这样做，它似乎是一个IE错误。我建议您将文字换成其他内容（div或p标记），或者只是将文字直接放在a标记中，如果您需要特定的样式，给a标记一个类。

IE CSS padding-left仅填充第一行文本

2 个答案: