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;
}

希望在解决方法中解决问题...

这是我的 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 并给它们一个边框底部，那就更好了。

克。 凯文

Answer 4

为了使.xcode 内的文本与水平线对齐，“代码”行必须垂直分布。不幸的是，您似乎没有理解line-height属性的含义，并没有考虑使用默认值。

行高属性

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

line-height属性的normal值

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

告诉用户代理将使用的值设置为基于“合理”的值 在元素的字体上。该值的含义与 .我们建议使用介于 1.0 到 1.2 之间的“正常”值。

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

关于您的情况

这里的快速解决方法是将.xcode 类中的line-height 设置为16px（这是背景图像的高度）。