2010-11-24 3 views
4
<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 отображается под изображением. Нет никакой проблемы с шириной, так как я тестировал ее с большей шириной. Я пробовал все, но не могу понять, как исправить эту ошибку.IE float fix in css

+0

Какая версия IE? Я использую IE 7 и кажется правильным ... – Schenz 2010-11-24 19:35:46

+2

Также вы используете правильный `DOCTYPE` и тестирование в IE6? Если нет, добавьте `` в начале страницы и добавьте `display: inline` в любые правила, в которых вы используете` float: left | right`. – 2010-11-24 19:51:05

ответ

4

Там двойная наценка поплавок ошибка , который нейтрализуется с дисплеем: встроенный и стандарты DOCTYPE. - Krof Drakula

Это правильный ответ, данный Krof Drakula на мой вопрос. Пришлось выбрать ответ на мой вопрос.

0

Я предлагаю заглянуть в jquery, у них обычно есть плагины для этого.

Я думаю, что в зависимости от вашей версии IE они работают по-разному в каждой версии. Я бы попытался сыграть с позицией: relative ;. У меня была такая же проблема для IE7 с одним из моих плавающих div и дачей позиции: absolute; сделал трюк.