У меня есть элемент уровня блока, который я центрирую на странице. Я заставил его работать для всех других браузеров, кроме IE6, где он ПОЧТИ работает.
http://tinyurl.com/28sh9eq
Если я просматриваю страницу в 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>
Спасибо за вашу помощь.