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

Question

There is one issue that drives me nuts for several days. I created a theme for Wordpress especially CSS http://fabienmischler.com/ . The problem is the DIV line on the right side is only aligned within Chrome Mac-version and Safari. All other Browser (INCLUDING CHROME Win-version) render it differently. The same happens with the Contact form on the right (that is a modified plugin from slick-form). Is there any elegant way to fix this issue or do I need to use CSS hacks? and if yes how for Chrome Windows version?

The container is absolute, the DIV (with the line) too.

Here is the DIV

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

This DIV is part of the Container-Div (standard in Wordpress):

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

All this is packed in the standard stylesheet (style.css) from Wordpress.

I CSS reset the sheet according to Eric Meyer http://meyerweb.com/eric/tools/css/reset/

Thanks in advance!!!!

Answer 1

The problem here is the rendering of the text on the different browser, especially the line-height and vertical-alignment on texts. They are never identical ...

A possible solution would be to not use the underlined text decoration for your line under title but to draw it as a separate element using the same top position as your other line. This way, it will always be correctly aligned on each browser.

Here is some sample CSS code to achieve it:

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

Update

Another solution would be to absolute position the line relative to the title. Setting the line relative to the title to a top of 16px aligns equally with the outer line which is positioned on 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: " "; }