Css 布局在IE 10中被破坏。Firefox、Opera、Safari和Chrome运行良好

这个链接是我的问题的一个例子。。。我使用png 1x16绘制行。。。这些行在发布的链接中可见。。。我的问题是:

为什么在IE6/8、FireFox、Opera、Safari和其他浏览器下，行与文本完全对齐，而在IE9/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:

我现在不在Windows机器上，但我猜

.xcode（行高：16px；}

可以解决您的问题，但我必须说这是创建行边框的错误方法。为什么不添加：

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

---

代替使用背景图像？

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

.alignment

{line height:20px；}

超过

.xcode行高正常值；

（不正常；）

除了h1、p、font等内容标记外，它们周围的边距/填充物都略有不同。因此，无响应的img不是最好的方法

如果你能用一个span，div或sinces将每一行包装成一个表格a tr，td，并给它们一个底部边框，那就更好了

Gr。

---

Kevin

为了使

.xcode

中的文本与水平线对齐，“代码”行必须垂直分布。不幸的是，您似乎没有理解

行高

属性的含义，并且没有考虑使用默认值

“行高度”属性

如您所见，

行高

属性将决定两行文本的距离。在您的情况下，我们需要它在

.xcode

的整个块中精确地

16px

normal的值

line height属性的值 从中，

normal

值定义为：

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

从一些在线资源（如或）中，您可以看到

normal

值的实际值取决于许多参数，如字体大小、字体系列、操作系统、用户代理等。。。因此，建议您使用一些css规范化样式表来正确设置

行高的值，并跨浏览器

关于你的案子
这里的快速修复方法是将
.xcode
类中的
行高设置为
16px
（这是背景图像的高度）。
调整行高：16px；在.xcode类中，检查[Finding/setting css line height defaults][1][1]：.xcode{line height:16px；}解决了我的问题。。。我忘了我在.xcode中声明了行高：normal；这是一个愚蠢的错误。。。我知道如何使用行高，但我忘记了该值在.xcode类中声明为正常值，在16px中更改后工作正常。非常感谢！