Question

有一个问题让我疯了好几天。我为Wordpress特别是CSS http://fabienmischler.com/创建了一个主题。问题是右侧的DIV线仅在Chrome Mac版和Safari中对齐。所有其他浏览器（INCLUDING CHROME Win版本）以不同方式呈现它。右侧的Contact表单也是如此（这是一个来自slick-form的修改过的插件）。有没有优雅的方法来解决这个问题，还是我需要使用CSS黑客？如果是，那么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/

重置了工作表

提前致谢!!!!

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

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

1 个答案: