当前位置: 动力学知识库 > 问答 > 编程问答 >

css - IE7 Image float bug

问题描述:

http://wilwaldon.com/ie7bug/test1.php

Notice the middle column, the images are supposed to float left, they do in every browser but IE7. I've never encountered this problem before and have no idea what's going on with it.

Any ideas that would point me in the right direction would be greatly appreciated, thank you.

UPDATE

If I delete width: 330px from #contentleft p the spotlights line up perfectly, but I ran into a new problem. The left column wraps the right column now. Ughh! IE7!!!

网友答案:

From your question it is not clear what exactly you are trying to achieve to float the image left of the Heading and the paragraph or just left of the paragraph. Could you please attach images showing the desired result and what you consider the bug.

网友答案:

I imagine it has to do with "width: 330px" you are giving to the

elements in the spotlight. IE7 treats them with that width so it clears the image...

You may need to play with the width for spotlights containing images and spotlights not containing images.

网友答案:

I don't like doing this, but this is a way to achieve the effect with IE7 using jQuery:

    $(function() {

        $(".spotlight .item img").each(function() {

            $(this).css("marginBottom", $(this).parent().height() - $(this).height());

        });

    });

See http://test.sua.umn.edu/test.kamran/ie7float.html

网友答案:

Copy paste this in empty html and see how it works. Should fix all your issues. Fix the width of .box to match your needed width. It also works if div.left is empty and you don't have image there.

<div class="box">
    <div class="left">
        <img src="http://www.google.com/intl/en_ALL/images/logo.gif" />
    </div>
    <div class="right">
        <h2>Heading</h2>
        <p>Paragraph text</p>
    </div>
</div>



<style>
    .box {
        width: 600px;
        background: red;
        }
    .left {
        float: left;
        width: auto;
        }
</style>
网友答案:

You seem to be using display: table-cell to have the text appear in a column next to the floated image instead of wrapping around it.

You should be using overflow to achieve that effect:

.spotlight1 p { 
    color: #333333;
    font-size: 12px;
    overflow: hidden;
}

You'll have to get rid of the width on those paragraphs too, though, which they're now getting from the #contentleft p.

But you can use the same trick for the leftmost two columns altogether if you put the #inner2right2 div right before the #inner2left div. You can then use overflow on that left column to make them stay next to each other. That way you can get rid of the width you're setting on the #contentleft p too.

This will work in IE7 too.

I think it'll work in IE6 as well if you give those same blocks "layout". The easiest way to do that is by adding zoom: 1.

分享给朋友:
您可能感兴趣的文章:
随机阅读: