Question

我有一个标题徽标，我在此徽标的左侧添加了一个图像。我使用了margin-left属性，并且在除IE6之外的所有主流浏览器中都能正常工作。作为一项研究，我使用position:relative属性来修复此负值。但没有运气。这是我使用的代码。

在<body>部分我正在使用此

<div id="logo">
<span style="position:relative;margin-left:-400px"><img src="image path"/>
</span>
</div>

现在DIV id =“logo” 有以下css样式

#logo {
    background: url("../images/logo.jpg") repeat scroll 0 0 transparent;
    border: 0 solid black;
    float: right;
    height: 70px;
    margin-top: 10px;
    padding: 0;
    width: 387px;
}

Answer 1

以下代码适用于我的IETester - IE6模式。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <style type='text/css'>
#logo {
    background: url("logo.png") repeat scroll 0 0 #EEE;
    border: 0 solid black;
    float: right;
    height: 70px;
    margin-top: 10px;
    padding: 0;
    width: 387px;
}
#logo span {
    position:relative;
    left:-400px;
    background:blue;
}
</style>
</head>
<body>
  <div id="logo">
<span><img src="logo.png" alt="" />
</span>
</div>
</body>
</html>

P.S。也许你应该使用这样的东西：

<div id="logo-wrapper">
    <div id="logo" style="float:right;"></div>
    <div style="float:right;"><img src="logo.png" /></div>
</div>

Answer 2

如果元素有浮动，在这种情况下，IE6会使边距值加倍。因此，如果您想将400px向左移动，则应分别为IE6写margin-left: -200px

#logo{position:relative}
span {position:absolute:left:-400px}

Answer 3

是的IE6不支持负边距填充值，所以你可以使用左右位置为负或正的定位来获得你想要的结果......

像这样： -

HTML

<div id="logo">
<span>span</span>
</div>

<强> CSS

    #logo {
    background: red;
    border: 0 solid black;
    float: right;
    height: 70px;
    margin-top: 10px;
    padding: 0;
    width: 387px;
}

#logo span {
position:relative;
left:-200px;
background:yellow;
    width:50px;
    height:50px;
}

Answer 4

您可以尝试将position:relative与left或right属性结合使用，将其放置在正确的位置。或者为IE浏览器编写特定的样式。

 .header{
     position:relative;
     left: -200px;
   }

负面的保证金价值不适用于IE6

4 个答案: