Home/ Questions/Q 6778643
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T16:17:24+00:00

I thought IE7 and above followed the same box model as Chrome/Firefox/Opera, but when

  • 0

I thought IE7 and above followed the same box model as Chrome/Firefox/Opera, but when I run the following code in IE8 and then in Chrome/Firefox/Opera, I get different results.

In IE8, the end of the box shows up with a bit of a lip that I want to get rid of. Is it possible to use strictly CSS to fix my issue or do I need to use Javascript to detect the browser and then change the CSS?

Here is the link to the code that I am working with. In order to see my problem, you need to use IE and then either Chrome, Firefox or Opera.

http://jsfiddle.net/LsXTk/1/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    IE7 has two modes: Compatibility mode and Standards mode. Yet another of a long line of brilliant moves on MS’s part with IE. (Yes, I’m being sarcastic):

    http://blogs.msdn.com/b/chkoenig/archive/2008/08/28/ie8-standards-mode-and-ie7-compatibility-mode.aspx

    What usually trips people up is that, by default, IE8 reverts to compatibility (ie, broke) mode if the page is being loaded locally or from a server on your network. I guess the logic was that it must be a page on your intranet, and since 90% of all intranet web software is horrifically coded IE6 monstrosities that pretty much break in any standard browser, it better assume the code is broken and revert to compatibility mode.

    As for detecting IE8, you can do it without JavaScript via IE’s conditional comments. What I typically do is wrap the opening body tag in conditionals and give each a unique ID:

    <!--[if !IE]> -->
    <body>
<!--<![endif]-->
<!--[if gt IE 8]> 
<body id="IE9">
<![endif]-->
<!--[if IE 8]>
    <body id="IE8">
<![endif]-->
<!--[if IE 7]>
    <body id="IE7">
<![endif]-->
<!--[if lt IE 7]>
    <body id="IE6">
<![endif]-->

    Then in your css, you can easily serve up separate CSS as needed:

    .myStyle {for good browsers}
#ie7 .myStyle {fix for IE7}
    • 0