Question

谦虚地向IE寻求帮助（当然）。我有一个div是一个简单的背景颜色块（#greenback），它包含两个其他div。第一个（#billboard）是一些居中的文本，第二个（#pright）是一个图像。它们彼此相邻排列，左侧是文本，右侧是图像。

在大多数FF等看起来没问题，但IE对文本div做了如下奇怪的事情:(绿色框内的蓝色矩形显示文本div的范围; teh图像div以白色为边界。）

IE6将文本部分移出界限到文本div的右边，使其与图像重叠。

alt text http://www.conservationenterprises.com/staging/jan08/IE6.png

IE7将它从边界移动到文本div的顶部。alt text http://www.conservationenterprises.com/staging/jan08/IE7.png

IE8至少使文本保持在div的范围内，但忽略了我正在努力实现的任何内部中心。

alt text http://www.conservationenterprises.com/staging/jan08/IE8.png

我在文本div上尝试了一个holly hack，但这似乎没有任何区别（或者是我在css中的位置？）。

任何帮助都非常感谢...

谢谢，帕特里克。

我的css :(请不要笑，这仍然是我第一张拼凑在一起的样式表！）

#greenback { position: relative;
width: 800px ;
height: 250px ;
background-color: #7EBB11 ;
border: 3px solid #112D82 ;
}

#picright { position: relative ;
float: right;
display: block;
margin-top: 11px;
margin-right: 11px;
margin-bottom: 11px;
max-width: 50%;
max-height: 218px;
border: 3px solid white;
vertical-align: middle ;
}

#greenback>#billboard {/*display:table for Mozilla and Opera*/
display: table ;
position: static ;
}

#billboard  { /* for IE*/
width: 45% ;
height: 99% ;
background-color: #7EBB11 ;
font-family: Optima, Calibri, Candara, Century-Gothic, 
Arial, sans-serif;
font-size: 160% ;
color: #ffffff ;    
position: relative; 
border: 2px solid blue;
}

#billboard div { /*for IE*/
position: absolute;
float: left ;
top: 50%;
}

#billboard>div { /*for Mozilla and Opera*/
display: table-cell ; 
vertical-align: middle ;
position: static;
}

#billboard div div {
position: relative ;
top: -50%;
}

/* Hides from IE5-mac \*/
* html .billboard {height: 1%;}
/* End hide from IE5-mac */

和我的HTML：

<div id="greenback">
<img src="kids.jpg" alt="kids" id="picright" />
<div id="billboard"><div><div><p>We help businesses,<br>communities and nature<br>take better care<br>of each other.</p>
</div></div></div></div>

Answer 1

如果没有HTML，很难说，但是你不应该在同一个元素上使用position: absolute和float: left - 这实际上没有意义。

您可能不应该在样式表中的任何位置使用position。除非你是编写脚本，否则通常都要远离它。

编辑：开始吧：

<style>

#greenback {
    width: 800px ;
    height: 250px ;
    background-color: #7EBB11 ;
    border: 3px solid #112D82 ;
}

#picright {
    float: right;
    display: block;
    margin: 11px 11px 11px 20px;
    width: 50%;
    height: 218px;
    border: 3px solid white;
}

#billboard  {
    width: 45% ;
    height: 99% ;
    border: 2px solid blue;
    float: right;
}

#billboard p {
    text-align: center;
    margin: 0;
    border: 1px solid red;
    margin-top: 50px;
    font-family: Optima, Calibri, Candara, Century-Gothic, Arial, sans-serif;
    font-size: 160% ;
    color: #ffffff ;
}
</style>

<div id="greenback">
    <img src="kids.jpg" alt="kids" id="picright" />
    <div id="billboard"><p>We help businesses,<br>communities and nature<br>take better care<br>of each other.</p></div>
</div>

如何在<div>？</div>中停止IE“移动”文本

1 个答案: