1

有一个问题让我发疯了好几天。我为 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 重置工作表

提前致谢！！！！

4

1 回答 1

0

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

一个可能的解决方案是不在标题下使用for 您的行，而是使用与另一行相同的位置将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: " "; }
于 2013-10-22T13:16:15.007 回答