Cross-browser display_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2022-12-20 15:57 出处：网络

I am testing a web site on Chrome, Firefox and Internet Explorer using the following in a CSS file. #foot_l开发者_StackOverflow中文版inks1, #foot_links2, #foot_links3 {

相关专题：browser css

I am testing a web site on Chrome, Firefox and Internet Explorer using the following in a CSS file.

#foot_l开发者_StackOverflow中文版inks1, #foot_links2, #foot_links3 {
    position: absolute;
    margin-top: 55px;
    margin-top: 14em;
    color: #02102f;
    font-family: Arial;
}

#foot_links1 {
    left: 335px;
}

#foot_links2 {
    left: 630px;
}

#foot_links3 {
    left: 830px;
}

The foot_links1, foot_links2 and foot_links3 all are in one straight line, but the placement of the foot_links1, foot_links2, foot_links3 placement varies with the browser.

How can I correct this?

I suggest using a reset stylesheet.

A reset stylesheet will reduce browser inconsistencies like default line heights, margins and font sizes of headings.

You may also want to check the following articles for further reading:

CSS Tip #1: Resetting Your Styles with CSS Reset
Mayerweb: Reset Reasoning
Stack Overflow: Is it ok to use a css reset stylesheet?
Stack Overflow: Best css reset

Ensure you have this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

This will change the Internet Explorer behaviour boxing model in Internet Explorer 7 or earlier

Ensure that the first rule of all is:

body *{
    padding:0;
    margin:0;
}

(Maybe it is not a good idea to append this after you already written all the CSS, instead you could use a more specific rute that aims the place.)

Start by ensuring you're running a proper doctype, and check whether the site validates at http://validator.w3.org/

A proper doctype would be xhtml transitional or html 4 strict (html 4 transitional usually makes IE do things differently)

As for reset stylesheets - yes they can be useful, however I try to avoid them, since you're pushing more kbs to your users (longer load times, especially if your webhotel isn't zipping css), and furthermore you're slowing down the browsers rendering, because there are more css rules it has to process.

Finally it just seems hackish to me - I mean you can make it look right without resorting to resetting all sorts of stuff, so why do it ?

You did not say how the placement varies. I made a quick test with IE8 and Opera and there were some difference in vertical placement. I fixed that by adding the top property (and removed the 2nd margin-top). For example:

   margin-top: 1em;
   top: 55px;

But generally, it is not good idea to try and force a specific look. Web page is not printed media. The users have different preferences, different display devices and they do not all have the same fonts etc. installed.

Although what other people have suggested are all good advice, as a direct answer to your question, use "padding-top" instead of "margin-top" and ensure your divs have a height set. That should get you quite close, or all the way there.