请更正此浏览器兼容性问题答案

【问题标题】：Please correct this browser Compatibility issue请更正此浏览器兼容性问题
【发布时间】：2009-08-26 19:36:12
【问题描述】：

我的 CSS 代码：

body
{
padding:0;
margin:10px auto;
width:800px;
}

.wrapper
{
 width:800px;
 background-color:#0099FF;
}

.bannercont
{
 margin-top:5px;
 height:90px;
 width:800px;
}

.banner
{
 position:relative;
 top:20px;
 background-image:url(../images/livesupport.png);
 width:267px;
 height:32px;
}

我的 HTML：

<html>
    <head>

    <link href="../css/iestyle.css" rel="stylesheet" type="text/css">
    <script language="javascript" src="../js/jquery.js"></script>
    <script language="javascript" src="../js/jquery.corners.js"></script>


    <script>

        $(document).ready( function(){
        //$('.banner').corners("30px transparent top");  
        });

    </script>


    </head>

    <body>

    <div class="wrapper">
        <div class="bannercont"><div class="banner"></div></div>


    </div>

   </body>
</html>

横幅在 Firefox 中居中显示，在 Internet Explorer 中左对齐。我需要它居中。请帮帮我

【问题讨论】：

标签： jquery css cross-browser

【解决方案1】：

添加

display: block;
margin: 0 auto;

到横幅元素

【讨论】：

【解决方案2】：

以下是一些反思：

向页面添加 doctype，使其不会以 quirks 模式呈现。
不要设置 body 元素的宽度。

【讨论】：

【解决方案3】：

你应该使用横幅：

margin: 0 auto;

它将自动在浏览器范围内居中。

【讨论】：