css - IE向右浮动-抱歉,我只是看不懂可用的解决方案

标签 css css-float

我有一个固定宽度的父 div,我在其中向右浮动带有标签的图像:

<div style="width: 200px;" class="buggybox imgr" id="g0">
    <img class="imgposr" src="../images/irrigation/hip4microwave2.png" alt="Microwave" width="200" height="133">
</div>

期望文本环绕图像。

不幸的是,IE7 将图像 float 到父 div 的 RHS 边界之外(参见 http://horticulture127.massey.ac.nz/ie7view.png),而 FF 和 Safari 在父 div 的边界内显示 float 和换行文本(黑色垂直线是父分区。

如何解决这个 CSS 错误?关于 IE6/7 右浮动问题的可用信息太多,以至于我完全不知所措,看不到解决方案。

.imgr{
    float: right;
    margin: 4px 0 4px 10px;
    padding: 4px;
    clear: right;
}
* html .buggybox {height: 1%;}

(imgposr 不是 css 元素——它是一些 jquery 的选择器)

最佳答案

似乎出于某种原因将您的“buggybox”的宽度设置为 1px - 这是我能够获得类似于您所描述的结果的唯一方法。

如果可能的话,您能否尝试发布更完整的有问题的代码?尝试使代码尽可能短,删除所有不相关的内容。我有以下代码设置,我认为它可以满足您的需求。

当我将 1 px 的宽度添加到 .imgr div 时,我得到的结果与您提供的图片相同(在 Firefox 和 IE 中),这就是为什么我怀疑这就是您的问题所在。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
#parent {
    width: 600px;
    border: 1px solid black;
}

.imgr{   
    float: right;    
    margin: 4px 0 4px 10px;    
    padding: 4px;    
    clear: right;
}
</style>
</head>
<body>
<div id="parent">
    <div class="buggybox imgr" id="g0">
        <img class="imgposr" src="../images/irrigation/hip4microwave2.png" alt="Microwave" width="200" height="133">
    </div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec sapien libero, eget interdum lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi rutrum interdum dui ac ultrices. Donec pulvinar feugiat nibh, sit amet rhoncus sapien consectetur quis. In orci ante, bibendum sit amet euismod eu, tristique ac erat. Donec in enim nisl. Etiam vestibulum scelerisque purus, et fringilla nibh malesuada sit amet. Praesent magna mi, egestas quis commodo a, vulputate ut sem. Nullam auctor vulputate justo, vel pharetra lectus pulvinar eget. Curabitur dignissim lectus nec ligula rutrum et pellentesque metus auctor. Sed metus diam, aliquet non malesuada vitae, tincidunt sit amet augue. Aliquam luctus posuere eros, non adipiscing ante varius sed. 
</div>
</body>
</html>

希望这对您有所帮助!

关于css - IE向右浮动-抱歉,我只是看不懂可用的解决方案,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/959531/

相关文章:

css - 流畅的动画停止

javascript - 悬停父元素时如何更改子元素的不透明度

javascript - jQuery - 在图像之间随机播放

html - 将 div 定位到不同 div 的底部,而不使用 Absolute

javascript - 无法在 HTML 中使用 AngularJS 在页面内滚动

iphone - 如何使用标题图像为移动设备设置 HTML,该图像占据浏览器的整个宽度?

html - float 元素从 html 列表中丢失

css - 使用表单输入归档剩余空间

CSS:从液态到固定以实现更小的分辨率

Html5 和 Css3 - 水平导航栏问题