Есть ли способ получить полную границу при добавлении границы в элемент fieldset?

Question

Когда я добавляю границу к элементу fieldset и затем перетаскиваю legend, чтобы работать в качестве заголовка, пробел в fieldset остается.

Есть ли способ получить всю границу без добавления оболочки div и установки для нее границы?

Пример

CSS

fieldset legend {
    position: relative;
    bottom: -40px; 
    background: transparent; 
}

jsFiddle .

Answer 1

Протестировано в IE7 / IE8 и последних версиях Firefox, Chrome, Safari, Opera.

Он выглядит одинаково во всех из них, за исключением того, что IE7 добавляет немного места слева.

Мне пришлось добавить маленькую невинную упаковку span.

http://jsfiddle.net/thirtydot/ErZEj/

HTML:

<form>
    <fieldset>
        <legend><span>I am</span></legend>

        <div style="margin-top:80px">dsfsdf</div>

    </fieldset>
</form>

CSS:

fieldset {
    border: 2px dotted #333;   
    height: 340px;
    position: relative
}
fieldset legend {
    position: absolute;
    top: 0;
    left: 0
}
legend span {
    position: absolute;
    left: 0;
    bottom: -60px;
    white-space: nowrap /* or define width */
}

Answer 2

Посмотрите на эту скрипку jquery: jsFiddle

Answer 3

Поместите position: relative на fieldset и разместите легенду абсолютно:

fieldset {
    border: 2px dotted #333;   
    height: 340px;
    position: relative;
}

fieldset legend {
    position: absolute;
    top: 40px;
    left: 0;
    background: transparent; 
}

Обновленная скрипка: http://jsfiddle.net/ambiguous/YHhPP/

Для меня это аналогично в Gecko и WebKit, оригинальная скрипка имеет пробел в WebKit, но легенда игнорирует bottom:-40px в Gecko.

Вы также можете попробовать использовать легенду: http://jsfiddle.net/ambiguous/Gwv4M/1/

fieldset {
    border: 2px dotted #333;   
    height: 340px;
}

fieldset legend {
    float: left;
    margin-top: 40px;
}

Но IE7 и IE8, похоже, тоже убивают этого.

Answer 4

Почему бы просто не оставить тег легенды и использовать что-то еще для заголовка внутри набора файлов.