【问题标题】:Fixing IE7 weird float behaviour修复 IE7 奇怪的浮动行为
【发布时间】:2011-07-05 03:17:33
【问题描述】:

这里已经有很多IE7浮动题了。

我已经阅读了其中的一些,但仍然找不到解决问题的方法。

如果您在 IE8、Firefox 和 Chrome 中查看此页面。

http://pastehtml.com/view/1devx12.html

它们都显示正确。

但是如果你在IE7中查看,是这样的,

http://img713.imageshack.us/i/ietesterie7.jpg/

所有标签都显示在第一行,这显然不是预期的。

如果可能,我想避免添加额外的 html 标记。

应该添加什么 css 来解决问题?

非常感谢大家。

【问题讨论】:

    标签: css cross-browser internet-explorer-7 css-float


    【解决方案1】:

    尝试为您的复选框设置一些不同的样式。将标签包裹在输入周围 - 这将使它们保持在一起。另外,不要将它们放在 DIV 中,而是尝试在无序列表中设置它们的样式。

    在此处查看现场演示(尚未在 IE 中测试-尚未在 Mac 上安装它-但应该可以使用):http://jsfiddle.net/wG7B2/

    HTML:

    <ul>
        <li>
        <label for="checkbox1"><input id="checkbox1" type="checkbox" value="">Option1</label>
        </li>
        <li><label for="checkbox2"><input id="checkbox2" type="checkbox" value="">Option2</label>
        </li>
        <li><label for="checkbox3"><input id="checkbox3" type="checkbox" value="">Option3</label>
        </li>
    </ul>
    

    CSS

    ul{
        list-style:none;
        padding:0;
        margin:0;
    }
    
    ul li{
        padding-bottom:10px;
    }
    
    ul li:last-child{
        padding-bottom:0px;
    }
    
    ul li input{
        margin-right:5px;
    }
    

    【讨论】:

    • 似乎没有简单的方法不添加更改 html 标记。但这应该没问题,只要它适用于 IE7。非常感谢您的回答。
    • 不用担心@bobo。祝你好运。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-07-22
    • 2013-08-16
    • 2020-08-24
    相关资源
    最近更新 更多