0

这是代码：jsFiddle

它在 Chrome 中看起来很正常（单选按钮没问题，尽管 6 个单选按钮中有 3 个留在浏览器的左边框），但在 Firefox 中看起来完全不同（Firefox 中的单选按钮很乱）。

如何解决css样式的问题？这些样式取自 twitter bootstrap，因此它们只能被覆盖。

另外，如果可能的话，html不能被触及，只有css。那是跨浏览器的错误吗？它看起来完全不同的原因是什么？

完整代码在这里：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


        <style>

            label
            {
                display       : block;
                margin-bottom : 5px
            }

            .radio input[type="radio"], .checkbox input[type="checkbox"]
            {
                float       : left;
                margin-left : -18px
            }

        </style>


    </head>
    <body>


        <div style="border:1px solid red; ">
            <label class="radio">
                <input name="count" value="A" type="radio">
                A </label>
            <label class="radio">
                <input name="count" value="B" type="radio">
                B </label>
            <label class="radio" style="border:1px solid blue;">
                <input name="count" value="C" type="radio">
                C </label>
        </div>

        <div style="margin-left: 300px; margin-top: -70px;">
            <label class="radio">
                <input name="count2" value="D" type="radio">
                D </label>
            <label class="radio">
                <input name="count2" value="E" type="radio">
                E </label>
            <label class="radio">
                <input name="count2" value="F" type="radio">
                F </label>
        </div>


    </body>
</html>
4

2 回答 2

3

问题是你的浮动。

去掉左边的浮子

.radio input[type="radio"], .checkbox input[type="checkbox"]
于 2012-11-22T15:47:49.787 回答
1

如果我理解正确，float 和 margin-left 会被 bootstrap 设置为你不想要的值。

为了覆盖它们，您需要做的就是向页面添加样式（或者最好是引导覆盖 css 文件，即在添加引导之后添加的文件），这将覆盖您不想要的引导值，例如

.radio input[type="radio"], .checkbox input[type="checkbox"]
            {
                float       : none;
                margin-left : 0px
            }​
于 2012-11-23T03:20:46.440 回答