Question

<div id="simg1" style="display: inline">
<img src="images/image.jpg">
</div>
<div id="sbdy"><a href="www.google.com">some text</a></div>

CSS Style:

#simg1 {
background-color: #fff;
    float: left;
    width: 85px;
    height: 80px;
    border-width:5px;

    border-right: solid 2px #fdd61e;
    border-left-top: solid 25px #fdd61e;
    border-left: solid 3px #fdd61e;
    border-top: solid 3px #fdd61e;
    border-bottom: solid 3px #fdd61e;
    border-radius: 15px 0px 0px 15px;
    overflow: hidden;
}
#sbdy {
background-color: #fff;
    position: relative;
    color: #000;
    float: left;
    width: 160px;
    height: 75px;
    padding: 5px 6px 0px 2px;
    border-right: solid 3px #fdd61e;    
    border-top: solid 3px #fdd61e;
    border-bottom: solid 3px #fdd61e;
    border-top-right-radius: 15px 15px;
    border-bottom-right-radius: 15px 15px;  
}

此代码在每个浏览器中都可以正常工作，但在IE中，文本div显示在图像下方。宽度没有问题，因为我已经测试了更宽的宽度。我已经尝试了一切，但无法弄清楚如何修复这个错误。

Answer 1

有一个双浮动边缘错误用显示器中和了它：内联和标准DOCTYPE。 - Krof Drakula

这是Krof Drakula对我的问题给出的正确答案。不得不选择我的问题的答案。

Answer 2

我建议调查jquery，他们通常都有插件。

我认为根据您的IE版本，它们在每个版本上的工作方式不同。我会尝试玩这个位置：亲戚; IE7中我有一个浮动div并给出一个位置：绝对;做了伎俩。

IE浮动修复css

2 个答案: