DIV 顶部属性的 CSS 跨浏览器问题

Question

有一个问题让我发疯了好几天。我为 Wordpress 创建了一个主题，尤其是 CSS http://fabienmischler.com/。问题是右侧的 DIV 行仅在 Chrome Mac 版和 Safari 中对齐。所有其他浏览器（包括 CHROME Win 版）以不同方式呈现它。右侧的联系表单（即 slick-form 的修改插件）也会发生同样的情况。有什么优雅的方法可以解决这个问题，还是我需要使用 CSS hacks？如果是，Chrome Windows 版本如何？

容器是绝对的，DIV（带线）也是。

这是 DIV

#hr-title {
position: absolute;
right: 0;
top: 100px;
width: 14%;
height: 1px;
z-index: 9999;
background-color: black; }

此 DIV 是 Container-Div 的一部分（Wordpress 中的标准）：

div#container {
margin: 0;
position: absolute;
left: 300px;
height: 100%;
right: 0;
top: 0; }

所有这些都包含在 Wordpress 的标准样式表 (style.css) 中。

我根据 Eric Meyer http://meyerweb.com/eric/tools/css/reset/ CSS 重置工作表

提前致谢！！！！

Answer 1

这里的问题是文本在不同浏览器上的呈现，尤其是文本上的line-height 和vertical-alignment。它们永远不会相同...

一个可能的解决方案是不使用underlined text decoration 作为标题下的行，而是使用与另一行相同的top 位置将其绘制为单独的元素。这样，它在每个浏览器上总是会正确对齐。

这里有一些示例 CSS 代码来实现它：

h1 { float: right; text-decoration: none; }
h1:before { content: " "; position: absolute; width: 100%; height: 1px; top: 101px; background: #000; }

更新

另一种解决方案是将行相对于标题进行绝对定位。将相对于标题的行设置为16px 的顶部与位于96px 上的外行同样对齐

#hr-title { top: 96px; }
h1.entry-title { float: right; position: relative; text-decoration: none; margin-bottom: 15px; }
h1:before { background: #000; width: 100%; height: 1px; top: 16px; position: absolute; content: " "; }