发表新帖
发表新帖

Why do different browsers render the same HTML differently?

前端 未结
关注
5 1089
情话喂你
情话喂你 2020-12-07 16:24

This is an html page :




Frame Set
相关标签:
5条回答
  • 我寻月下人不归
    2020-12-07 16:31

    The problem is that not all browsers use the same rendering engine or rendering rules. This is a constant source of grief for web developers, and it's not something that seems to be going away anytime soon.

    Make use of CSS whenever possible, as browsers tend to comply best when under strict stylesheet rules. Beyond that, good luck and welcome to web dev :)

    0 讨论(0)
  • 轮回少年
    2020-12-07 16:32

    To be cross browser you need several tools, a lot of experience, and, in case of IE, a lot of luck. In addition to the other answers here, you can use Yahoo CSS which give you a common base (all browsers don't have the same default values): http://developer.yahoo.com/yui/reset/

    0 讨论(0)
  • 你的背包
    2020-12-07 16:36

    How to fix this page

    Let's help you out here a bit...

    Use a Doctype

    See @Topera's answer

    To make everything center aligned

    Please do not use

    var winSize = $(window).width();
var margin = (winSize-1000)/2;;
  $('#main').css({'margin-left':margin,'margin-right':margin});  
}

    Instead, use the CSS property margin: 0 auto. As a rule of thumb, always use a CSS solution instead of a Javascript where possible.

    To create equal height columns

    See:
    http://www.positioniseverything.net/articles/onetruelayout/equalheight
    http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

    Use the correct terminology and better class name

    To avoid confusion, please do not refer to non-frame elements as frames. For more about what frames are, see: http://reference.sitepoint.com/html/elements-frames-windows

    Give your classes meaningful names. The reason for this is the same for any other language - so that when you come back later three month later you won't be scratching your head at classes named l, r and h.

    Use semantically valid HTML

    The align and text-align attributes are officially deprecated; please see the above solution on making things center aligned and the CSS property text-align property instead.

    HTML elements give meaning to the content they are wrapped in. The headers you have for each 'frame' should be marked up with <h2> or <h3> headings instead - while divs are generic block level elements with no meaning, the h1 to h6 set of elements (for want of a better word) tells the browser that the text contained in them are headings.

    CSS Box Model

    Please have a look at how the box model and floats work in CSS. bottom and top are not valid values for the CSS float property.

    http://dev.opera.com/articles/view/30-the-css-layout-model-boxes-border/#cssboxmodels
    http://reference.sitepoint.com/css/boxmodel
    http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

    The Real Problem Here

    is not with the browsers. IE8 surprisingly misbehaves much less than its predecessors. Try writing better HTML and CSS instead.

    0 讨论(0)
  • 眼角桃花
    2020-12-07 16:47

    You miss the tag <!DOCTYPE>, in the first line of page.

    Ex:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    If you don't put it, IE will activate quirks mode, and very strange things will happen. When a browser activate quirks mode, many things change, as box model.

    NOTE: many browsers has quirks mode, not only IE (I know that firefox has too).

    More about quirks mode.

    List of doctypes.

    0 讨论(0)
  • 小鲜肉
    2020-12-07 16:50

    1. use a doctype: list at the moment i would use -> XHTML 1.0 Strict, XHTML 1.1, HTML5 (do not if you are not familier with the problems that could occur

    2. use a reset: eric meyers reset for xample is a good one

    3. use a clearfix (and know when to use it) for example the new clearfix by Jeff Starr

    using this three things, its a good start to let your website look the same in all browsers. after that you must learn about custom browser bugs, like double margin bug and so on.

    0 讨论(0)
 看不清?
提交回复
热议问题