Weird css difference between chrome and IEE_问答_开发者

Weird css difference between chrome and IEE

开发者 https://www.devze.com 2023-03-18 04:12 出处：网络

I am doing a website in the joomla16 framework, using a modified beez5 template. I am getting a strange result from IE. Chrome shows the site as it is intended, however IEE is adding a padding I can't seem to find anywhere. I've been using IE dev tool vs. the Chrome element inspector to find this discrepancy, but it's nowhere to be found.

The site 开发者_运维问答is http://85.233.235.109/joomla16/

Any help or suggestions would be gladly appreciated.

Edit:

I am testing with IE 8.0.(7601)

UPDATE:

I seem to have found something in the IE dev tool. Using the layout pane you can get the calculated sizes of the different elements.

The div id="header-image" has a size of 1050x137, whereas the a class="logo" and the img class="logo" both have a size of 1050x134.

This would account for the 3 pixel line, but I don't see where it is generated.

It seems I have found the solution, although it's a strange one.

By setting height of div id="header-image" to a fixed 134px ( header-image{height:134px;}) the problem is solved, and the results are the same in IE and Chrome.

However, I don't know why IE is adding a 4 pixel difference in the element, when the absolute height is not entered.

This is just a guess: IE might run your site in quirks mode, where it emulates the behaviour of IE6. To disable quirks mode, you have to specify a correct doc type. The correct doctype for HTML5 is for example: