0

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

4

4 回答 4

0

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

于 2013-08-16T13:01:50.400 回答
0

.alignment {line-height: 20px;}
被统治.xcode line-height normal;

IE不正常；）

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

如果你可以用 span、div 包裹每一行，或者将其作为一个 tr、td 的表格并给它们一个边框底部，那就更好了。

格。凯文

于 2013-08-16T13:09:04.307 回答
0

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

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

而不是使用背景图片？

于 2013-08-16T12:49:47.873 回答
0

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

行高属性

在此处输入图像描述

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

财产的normal价值line-height

从W3C CSS 规范中， value 的normal值定义为：

告诉用户代理根据元素的字体将使用的值设置为“合理”的值。该值的含义与 相同。我们建议使用 1.0 到 1.2 之间的“正常”值。

从本文或此页面等在线资源中，您可以看到 value 的实际normal值取决于许多参数，例如字体大小、字体系列、操作系统、用户代理......因此，建议您应该使用一些css规范化样式表以line-height正确设置和跨浏览器的值。

关于您的案例

这里的快速修复是将类line-height内部设置为（这是背景图像的高度）。.xcode16px

于 2013-08-16T13:35:25.640 回答