0

コードは次のとおりです。

Chrome では適切に見えます (ラジオボタンは問題ありませんが、6 つのラジオボタンのうち 3 つがブラウザの左端に残っています) が、Firefox ではまったく異なって見えます (Firefox のラジオボタンはめちゃくちゃです)。

css スタイルの問題を解決するにはどうすればよいですか? スタイルは twitter ブートストラップから取得されるため、オーバーライドのみ可能です。

また、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 が望ましくない値に設定されています。

それらをオーバーライドするには、必要のないブートストラップ値をオーバーライドするスタイルをページに追加するだけです (または、できればブートストラップ オーバーライド css ファイル、つまり、ブートストラップを追加した後に追加するファイル)。

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