float:right 在使用内部样式表而不是内联样式时在 chrome 和 safari 中的行为不同

Question

我正在研究一个关于制作可配置下拉列表的示例，来自here。它仍在进行中，但我试图保持干净，并将我的内联样式声明移动到 html 文件头部的内部样式表中。

Here's a fiddle for it.

奇怪的是 html 的第 9 行，这里显示为第二跨行：

<dl id="sample" class="dropdown">
    <dt><a href="#" class="uiwidgetcontent uiborderall" style="width: 200px;">
        <span>Please select the country</span>
        <span class="ui-icon ui-icon-triangle-1-s" style="float:right;"></span>
    </a></dt>

正如我所料，这在所有浏览器中都可以正常工作。但是在标题的样式中，我把同样的东西放在span:last-child 行中。 （我将整个样式部分留作上下文）：

    .uiborderall {
        border-radius: 18px;
    }
    .uiwidgetcontent {
        background-color: #abc;
    }
    .dropdown dd, .dropdown dt, .dropdown ul { margin: 0px; padding: 0px; }
    .dropdown dd { position: relative; }
    .dropdown a, .dropdown a:visited { text-decoration: none; outline: none; display: inline-block;}
    .dropdown dt a:hover, .dropdown dt a:focus { color: #5d4617; border: 1px solid #5d4617;}
    .dropdown dt a {display: inline-block; border: 1px solid #d4ca9a;}
    .dropdown dt a span:first-child {cursor: pointer; padding: 5px; display: inline-block; }
    .dropdown dt a span:last-child {cursor: pointer; float: right; margin-right: 10px; }
    .dropdown dd ul { display:none; left:0px;  position:absolute; top:1px; width:auto; min-width:170px; list-style:none; }
    .dropdown span.value { display:none;}
    .dropdown dd ul li a { padding:5px; display:block;}
    .dropdown dd ul li a:hover {}

我应该能够从<span> 元素中删除内联样式，它应该回退到内部样式表。在 Firefox 和 IE 中，这可以正常工作。但是，在 Chrome 和 Safari 中，当我这样做时，内部样式表中的 float: right 似乎被忽略了。对于它的价值，至少在 chrome 中，float:right 仍然设置在适当的范围内。渲染器似乎忽略了它。

有没有办法让我在四大浏览器的样式表中使用float:right，还是必须将它内联到元素中？

谢谢！

Answer 1

您不需要将float 元素放在您希望它浮动的内容之前吗？

我颠倒了你的 :first-child 和 :last-child css 样式，颠倒了你的跨度的顺序，并删除了内联样式并且它有效：http://jsfiddle.net/3xbcF/1/

<dl id="sample" class="dropdown"> <dt><a href="#" class="uiwidgetcontent uiborderall" style="width: 200px;">
        <span class="ui-icon ui-icon-triangle-1-s"></span>
        <span>Please select the country</span>
    </a></dt>

css:

.dropdown dt a span:last-child {
    cursor: pointer;
    padding: 5px;
    display: inline-block;
}
.dropdown dt a span:first-child {
    cursor: pointer;
    float: right;
    margin-right: 10px;
}