Question

我有一个块级元素，我以页面为中心。我已经让它适用于所有其他浏览器，除了它几乎可以工作的IE6。

如果我在IE6中查看该页面，则红色框略微偏离IE中粉红色的中心。如果我然后调整浏览器窗口的大小，它会捕捉到我想要的位置。呃......是的......是什么给出的？如何调整窗口大小使它工作？我也尝试在包装器上设置一个显式宽度，但没有用。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <style type="text/css">

            BODY {
                text-align: center;
                font-family: Arial;     
                }

            .row_wrap {
                height: 100px;
                margin-bottom: 30px;
                background-color: pink;
                }

            .row {
                float: right;
                position: relative;
                left: -50%;
                text-align: left;
                clear: both;
                }

            .button1 {
                color: #FFF;
                height: 36px;
                text-decoration: none;
                position: relative;
                padding: 0 30px;
                background: url('button.gif') no-repeat 0 0;
                display: block;
                float: left;
                left: 50%;
                }

                .button1 .end {
                    width: 20px;
                    height: 37px;
                    position: absolute;
                    right: -2px;
                    top: 0;                             
                    background: url('button.gif') no-repeat right 0;
                    }
                .button1 .text {
                    font-size: 16px;
                    font-weight: bold;
                    white-space: nowrap;
                    height: 36px;
                    padding-top: 7px;
                    display: block;
                    float: left;
                    }
                .button1 .text .arrow {
                    vertical-align: 1px;
                    }

    </style>
</head>
<body>


    <h2>RTL: Button 1</h2>
    <div class="row_wrap">
    <div class="row" dir="rtl">
        <a href="#" class="button1">
            <span class="end"></span>   
            <span class="text"><span class="arrow">»</span> Hello 1.</span>
        </a>
    </div>
    </div>

    <h2>RTL: Button 1-2</h2>
    <div class="row_wrap" style="width: 400px;">
    <div class="row" dir="rtl">
        <a href="#" class="button1">
            <span class="end"></span>   
            <span class="text"><span class="arrow">»</span> Hello 1.</span>
        </a>
    </div>
    </div>

    <br/><br/>  

    <h2>Normal: Button 1</h2>
    <div class="row_wrap">
    <div class="row">
        <a href="#" class="button1">
            <span class="end"></span>   
            <span class="text"><span class="arrow">»</span> Hello.</span>
        </a>
    </div>
    </div>

</body>

感谢您的帮助。

Answer 1

具有特定宽度和margin-left: auto; margin-right: auto的div也应该以ie6为中心。

CSS：在IE6中居中浮动的块级元素（它几乎可以工作）

1 个答案: