IE 向右浮动 - 抱歉，我无法理解可用的解决方案

发布于 2024-07-24 03:57:23 字数 773 浏览 4 评论 0原文

我有一个固定宽度的父 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 将图像浮动到父 div 的 RHS 边界之外（请参阅 http://horticulture127. Massey.ac.nz/ie7view.png），而 FF 和 Safari 在父 div 边界内显示浮动文本和换行文本（黑色垂直线是父 div 的左/右边界。

如何解决此问题CSS 错误？有太多关于 IE6/7 右浮动问题的信息，我完全不知所措，看不到解决方案

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

（imgposr 不是 css 项 - 它是某些 jquery 的选择器）。

原文

I have a fixed width parent div within which I am floating right an image with the tags:

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

with the expectation that the text will wrap around the image.

Unfortunately, IE7 floats the image outside the RHS boundary of the parent div (see http://horticulture127.massey.ac.nz/ie7view.png) whereas FF and Safari display the float and wrapped text within the parent div's boundary (the black vertical lines are the LHS/RHS boundaries of the parent div.

How do I fix this CSS fault? There's just so much info available about IE6/7 problems with right floats that I'm totally overwhelmed and can't see the solution.

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

(imgposr is not a css item - it's a selector for some jquery)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我的奇迹 2024-07-31 03:57:23

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

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

当我向 .imgr div 添加 1 px 的宽度时，我得到的结果与您提供的图片相同（在 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>

希望这可以帮助！

It seems like something is setting the width of your 'buggybox' to 1px for some reason - that is the only way I was able to get a result that resembles what you are describing.

If at all possible, could you try to post a more complete bit of code that has the problem in it? Try to make the code as short as possible, removing everything irrelevant. I have the following code setup, which I think does what you want.

When I add a width of 1 px to the .imgr div, I get the same result as in the picture you've supplied (in both Firefox and IE), which is why I suspect that is where your problem is.

<!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>

Hope this helps!

回复收藏 0 原文