-1

我有一个标题徽标，我在该徽标的左侧添加了一张图片。我已经使用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;
}
4

4 回答 4

2

以下代码在我的 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>

PS也许你应该使用这样的东西：

<div id="logo-wrapper">
    <div id="logo" style="float:right;"></div>
    <div style="float:right;"><img src="logo.png" /></div>
</div>
于 2012-05-17T06:46:26.993 回答
1

如果元素有浮动，在这种情况下，IE6 会将边距值加倍。所以如果你想向左移动400px，你应该单独为IE6写margin-left: -200px

#logo{position:relative}
span {position:absolute:left:-400px}
于 2012-05-17T05:50:21.723 回答
1

是的，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;
}
于 2012-05-17T07:09:13.993 回答
0

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

 .header{
     position:relative;
     left: -200px;
   }
于 2012-05-17T05:56:06.827 回答