在IE 10中打破布局.Firefox，Opera，Safari和Chrome工作正常

Question

http://www.alecos.it/new/125027/125027.php此链接是我的问题的一个示例...我使用png 1x16绘制行...在发布的链接中可以看到行...我的问题是：

为什么在IE 6/8，FireFox，Opera，Safari和其他浏览器下，行与文本完全对齐，而在IE 9/10/11下，文本不适合行？

我使用了一个简单的CSS：

/* Style Source Code */
.code {
  border-radius: 7px;
  border: #6666FF 1px solid;
  background-color: #FFF5EE;
  background-image: url("../bkg/Bkg_116.png");  /* Horizontal Rows */
  background-repeat: repeat;
  background-position: 0 10px;
}
/* Style Source Code */
.xcode {
  color: #008000;
  font-family: 'Courier New', Courier, FreeMono, 'Nimbus Mono L', monospace;
  font-size: 13px;
  font-style: normal;
  line-height: normal;
  font-weight: normal;
  font-variant: normal;
}

/* Style Div */
.alignment {
  line-height: 20px;
  text-align: justify;
}

希望在workround中解决问题......

这里有我的css：http://www.alecos.it/css/alecos.css

Answer 1

我现在不在Windows机器上，但我的猜测.xcode(line-height:16px;}可以解决您的问题，但我必须说这是创建行边框的错误方法。为什么不添加：

.xcode td{border-bottom:1px solid #ddd;}

而不是使用背景图片？

Answer 2

Firefox暂时过时，因为它的下一次更新意味着它的浏览器无法以与其他浏览器相同的方式处理代码。

Answer 3

.alignment {line-height: 20px;}
取决于.xcode line-height normal;

IE不正常;）

除了像h1，p这样的内容时，字体周围的边距/填充也略有不同。因此，无响应的img不是最佳方式。

如果你可以用span，div包装每一行，或者因为它的表是一个tr，td并给那些一个边框底部会更好。

的Gr。 凯文

Answer 4

为了使.xcode内的文字与水平线对齐，＆＃34;代码＆＃34;线必须垂直分布。不幸的是，您似乎没有理解line-height属性的含义，并且在没有考虑的情况下使用默认值。

行高属性

如您所见，line-height属性将决定两行文本的距离。在您的情况下，我们需要在16px的整个块内完全.xcode。

normal属性

的line-height值

从W3C CSS spec开始，normal值的值定义为：

  

告诉用户代理将使用的值设置为＆＃34;合理的＆＃34;基于价值   在元素的字体上。该值具有相同的含义   。我们建议使用正常的＆＃39;正常值。在1.0到1.2之间。

从this article或this page这样的在线资源中，您可以看到normal值的实际值取决于许多参数，如字体大小，字体系列，操作系统，用户代理， ...因此，建议您使用一些 css normalize stylesheet 来正确设置line-height的值并跨浏览器。

关于您的案例

此处的快速解决方法是将line-height课程中的.xcode设置为16px（这是您背景图片的高度）。