Question

我遇到一组按钮的问题，这些按钮仅在IE 7或更低版本中合并到列表元素中。因此，所有按钮与第二个li元素中的Title 2一起显示。请参阅下面的html和css

<ul class="tabs">
   <li><a href="#tab1">Title 1</a></li>
   <li><a href="#tab2">Title 2</a></li>
   <span class="button-span">
   <button id="print" title="Print">
   <img alt="Print" src="images/ico-print.png" border="0"/>
   </button>
   <button id="save" title="Save">
   <img alt="Save" src="images/word.gif"/>
   </button>
   </span>
</ul>

CSS

ul.tabs li {
    background: url('../images/gradient-black.png') repeat-x top left #262626;
    border-top: 1px solid #444;
    border-left: 1px solid #535250;
    border-right: 1px solid #535250;
    -webkit-border-top-left-radius: 6px;
    -moz-border-top-left-radius: 6px;
    border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-top-right-radius: 6px;
    border-top-right-radius: 6px;
    cursor: pointer;
    float: left;
    margin: 0 5px 0 0;
    padding: 6px 20px;
    overflow: hidden;
    text-align: center;
    width: 200px;
}

span.button-span {
    margin-right: 35px;
    float: right;
    clear: both;
}

Answer 1

你应该看看这个：http：//stackoverflow.com/questions/1903453/what-disadvantages-are-there-to-the-button-tag-it-seems-there-are-quite-a -fe是一个线索，为什么它不能正常工作，你也需要关闭你的span标签，如@ da5id说

Answer 2

修复示例：http://jsfiddle.net/xQ4L9/1/（使用网址http://jsfiddle.net/xQ4L9/1/show/查看IE7中的结果）

修复步骤：

将button-span移出ul并将其设为阻止元素。
将相应的CSS选择器从span.button-span更改为.button-span
移除clear:both的{{1}}。

按钮合并到IE 7中的列表元素中

2 个答案: