DIV top 属性的 CSS 跨浏览器问题

Question

有一个问题让我抓狂了好几天。我为 Wordpress 特别是 CSS 创建了一个主题 http://fabienmischler.com/ .问题是右侧的 DIV 行仅在 Chrome Mac 版本和 Safari 中对齐。所有其他浏览器(包括 CHROME Win 版本)以不同方式呈现它。同样的情况也发生在右边的 Contact 表单上(这是一个修改自 slick-form 的插件)。有什么优雅的方法可以解决这个问题，还是我需要使用 CSS hack？如果是，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。它们永远不会相同......

一个可能的解决方案是不对标题下的行使用带下划线的文本修饰，而是使用与其他行相同的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: " "; }