Weird css difference between chrome and IEE
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:
<!DOCTYPE HTML>
加载中,请稍侯......
精彩评论