我有一个以页面为中心的 block 级元素。我已经让它适用于除 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>
感谢您的帮助。
最佳答案
具有特定宽度和 margin-left: auto 的 div； margin-right: auto 也应该在 ie6 上居中。
关于CSS:在 IE6 中居中 float block 级元素(它几乎可以工作)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2869772/