【问题标题】:Image float problems with Internet Explorer < 8Internet Explorer < 8 的图像浮动问题
【发布时间】:2011-08-03 00:29:30
【问题描述】:

我注意到“float”css 属性和 Internet Explorer 6 和 7 存在一个非常烦人的问题。

我有一个带有 2 个简单图像的 html:

<img src="aa.jpg">
<img src="bb.jpg" class="alignright">

这是(非常简单的)CSS:

.alignright { float: right;}

使用资源管理器的第一张图片(没有任何浮动属性): http://img5.imageshack.us/img5/2505/schermata4t.png

有没有办法用 CSS 解决这个问题?

【问题讨论】:

    标签: css css-float image


    【解决方案1】:

    首先将要浮动的东西放在容器的右侧(例如,将“bb.jpg”图像放在“aa.jpg”之前)

    【讨论】:

      【解决方案2】:

      我认为这更多地与您没有将第一张图片浮动到左侧这一事实有关。

      查看http://jsfiddle.net/biznuge/KUnNn/3/了解详情。

      对我来说,这似乎也发生在 FF 中,而不是像您建议的那样仅发生在

      【讨论】:

        【解决方案3】:

        对于 IE7 / IE6,您必须...

        • 向左浮动第一张图片
        • 将第二张图片向右(或向左)浮动
        • 将“clear:both”添加到以下文本块(如果您希望它出现在图像之后)

        http://jsfiddle.net/Kyq5u/

        我使用 span 来模拟图像。

        CSS...

        
        .img-a {
            background-color: red;
            padding: 100px;
            float: left;
        }
        .img-b {
            background-color: blue;
            padding: 100px;
            float: right;
        }
        p {
            clear: both;
        }
        

        HTML...

        <span class="img-a"></span>
        <span class="img-b"></span>
        
        <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu  dolor et arcu dapibus cursus.
        </p>
        

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2011-07-07
          • 1970-01-01
          • 1970-01-01
          • 2010-10-27
          • 1970-01-01
          • 2012-12-24
          相关资源
          最近更新 更多