我想有一些跨浏览器一致性在我的fieldets，你知道我该怎么做呢？ [英] i want to have some cross browser consistency on my fieldsets, do you know how can i do it?

问题描述

我有fieldets的这个问题...看看

i have this problem with fieldsets... have a look at

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

是否有可能实现我想要的CSS？ ??相信我，我试过！

is it possible to achieve what i want with css??? believe me, i tried!

你可以看到在img，我只是想让图例的外观在不同的浏览器是一致的，我想它使用宽度的字段集没有更多（像chrome和ie）不少（像firefox），不担心圆角和其他问题，这是照顾。

as you can see on the img, i just want the look of the legend to be consistent across browsers, i want it to use the width of the fieldset no more (like chrome and ie) no less (like firefox), dont worry about the rounded corners and other issues, thats taken care of.

我使用的核心。

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>

推荐答案

字段集和图例因为硬/不可能而臭名昭着风格，特别是跨浏览器。看起来IE问题可能部分是由于颜色出血Bug 。

Fieldsets and legends are notorious for being hard/impossible to style, especially cross browser. It looks like the IE problem may be partially due to the Color Bleed Bug.

我个人认为，在字段集中创建标题时，我会承认失败并将图例设置为 display：hidden; 以圆角的风格。

Personally, I would admit defeat and set the legend to display: hidden; while creating a header inside the fieldset to style with rounded corners.

这篇关于我想有一些跨浏览器一致性在我的fieldets，你知道我该怎么做呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！