я хочу иметь некоторую согласованность между браузерами для моих наборов полей, знаете, как я могу это сделать? - PullRequest
Новая
       17

я хочу иметь некоторую согласованность между браузерами для моих наборов полей, знаете, как я могу это сделать?

0 голосов
/ 24 апреля 2010

У меня есть эта проблема с fieldsets ... взгляните на

http://i.imgur.com/IRrXB.png

можно ли добиться того, что я хочу с помощью CSS ??? поверь мне, я пытался!

как вы можете видеть на img, я просто хочу, чтобы легенда была одинаковой во всех браузерах, я хочу, чтобы она использовала ширину набора полей не больше (например, chrome и т. Д.) Не меньше (например, firefox) не беспокойтесь о закругленных углах и других вопросах, о которых позаботились.

Вот ядро, которое я использую.

CSS 

    <style type="text/css">
        fieldset {margin: 0 0 10px 0;padding: 0; border:1px solid silver; background-color: #f9f9f9; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px}
        fieldset p{clear:both;margin:.3em 0;overflow:hidden;}
        fieldset label{float:left;width:140px;display:block;text-align:right;padding-right:8px;margin-right: 2px;color: #4a4a4a;}
        fieldset input, fieldset textarea {margin:0;border:1px solid #ddd;padding:3px 5px 3px 5px;}
        fieldset legend {
            background: #C6D1E8;
            position:relative;
            left: -1px;
            margin: 0;
            width: 100%;
            padding: 0px 5px;
            font-size: 1.11em;
            font-weight: bold;
            text-align:left;
            border: 1px solid silver;
            -webkit-border-top-left-radius: 5px;
            -webkit-border-top-right-radius: 5px;
            -moz-border-radius-topleft: 5px;
            -moz-border-radius-topright: 3px;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }

        #md {width: 400px;}
    </style>

HTML 

    <div id="md">
        <fieldset>
            <legend>some title</legend>
            <p>
                <label>Login</label>
                <input type="text" />
            </p>
            <p>
                <label>Password</label>
                <input type="text" />
            </p>
            <p><label>&nbsp;</label>
                <input type="submit">
            </p>
        </fieldset>
    </div>

1 Ответ

2 голосов
/ 24 апреля 2010

Fieldsets и легенды печально известны тем, что их трудно / невозможно стилизовать, особенно кросс-браузер. Похоже, что проблема IE может быть частично из-за Color Bleed Bug .

Лично я бы признал поражение и установил легенду на display: hidden; при создании заголовка внутри набора полей для стилизации со скругленными углами.

...