Question

我的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中左对齐。我需要它居中。请帮帮我

Answer 1

添加

display: block;
margin: 0 auto;

到横幅元素

Answer 2

以下是一些反思：

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

Answer 3

你应该用于横幅：

margin: 0 auto;

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

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

3 个答案: