why does the page display differently in IE than google chrome?

问题

Certain pages display terribly in IE generally, what is the best approach to solving these issues?

回答1:

You forgot to add a doctype, so your page is in Quirks Mode.

Add this (the HTML5 doctype) as the very first line:

<!DOCTYPE html>

and it should look better.

Although, changing the Document Mode manually (using Developer Tools; hit F12), it still doesn't look right. There are evidently other problems with the page.

The most pertinent problem (after escaping Quirks Mode) is this:

<body style="margin: 0; padding; 0;background-color: 4DA2CA;">

Internet Explorer is not showing any background colour because you forgot the # before the colour. (And you have padding; 0, with a ; instead of :)

This will work:

<body style="margin: 0; padding: 0; background-color: #4DA2CA">

But you shouldn't be using inline styles in the first place..

This would be better:

<body>

with CSS in your stylesheet:

body {
    margin: 0;
    padding: 0;
    background-color: #4DA2CA
}

回答2:

you mean that in IE the Div's are smaller.Thats because in IE css border,margin are included in the width declared.So, if you have given a div width of 100px and a margin of 10px both sides then in IE the actual visible width of this div will be 100-10-10=80px.To solve the problem you can use child css decleration. Considering our example if you want to show this div 100px width in both the browsers do the following

    .mydiv{       /*This deceleration will be understood by all the browsers*/
     margin:10px;
     width:120px;       
    }

    html>body .mydiv{  /*This deceleration will not be understood by IE browsers so other will override the width*/
     width:100px;          
    }

Using this you can uniform the width of your Divs across both IE and non-ie browsers

回答3:

Instead of pointing out the reason for each element's different way of rendering in IE, I would strongly recommend not re-inventing the wheel each time you create a new page element.

Even in modern standards-complaint browsers, CSS can be very unpredictable, so it's better to use bullet-proof snippets of code from trusted sources such as

CSS the Missing Manual

CSS the Definitive Guide

CSS Cookbook

Start out with working blocks of HTML/CSS and modify them to your liking and test cross-browser from there. The whole process will be much less frustrating.

来源：https://stackoverflow.com/questions/5844267/why-does-the-page-display-differently-in-ie-than-google-chrome

标签

html

css

blueprint-css