Ссылка на демонстрационный jsBin

 .fieldset {border: 1px solid #ddd; маржа сверху: 1em; ширина: 500 пикселей; } .fieldset h1 {размер шрифта: 12 пикселей; выравнивание текста: центр; } .fieldset h1 span {display: inline; граница: 1px solid #ddd; фон: #fff; отступ: 5 пикселей 10 пикселей; положение: относительное; верх: -1,3 эм; } 

 
 
Title 
 
 Content 
 
 

Полагаю, вы уже знаете ответ.

У вас есть 2 варианта, вы предоставляете свою собственную границу (это много ненужной работы) или позиционируете элемент с окклюдами границы (проблема в том, что вы можете иметь только сплошной цвет фона, но, может быть, это и нормально).

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

Мое общее мнение по этим темам заключается в том, что вы не должны пытаться делать с сетью вещи, которые требуют A) чрезмерных усилий или B) решения по разметке, что не совсем очевидно для начала. В Сети есть ограничения, и вы бы хорошо справились с ними, вместо того, чтобы пытаться обойти эти ограничения.

Итак, я вынужден спросить, в чем проблема с

?

Однако это было сделано для организации форм,и использовать его для общего дизайна не лучше, чем использовать таблицы для общего дизайна

Это ошибка. Основная проблема с использованием таблиц для макета заключается в том, что макеты почти не сопоставляются с табличными данными. Вторая проблема заключается в том, что ни один из тех, которые не отображаются на табличные данные, не являются табличными данными, а некоторые из них - нет. То есть семантика разметки не будет соответствовать семантике страницы. Кроме того, с практической точки зрения, механизм компоновки таблиц обычно делает создание пользовательских стилей и просмотр только текста болезненным или невозможным.

Итак, fieldset явно предназначен для группировки полей формы. И выбор элемента по внешнему виду почти всегда означает, что это плохой выбор. Однако для этого конкретного примера я бы сказал, что набор полей + легенда, содержащая список, почти не имеет недостатков (на самом деле, единственный, о котором я могу думать, это скейпер, который наивно интерпретирует набор полей как сигнализацию формы, а затем тратит время пользователя на перечисление его содержимое отличается; но я не знаю ничего, что бы это делало на самом деле). Основная причина этого заключается в том, что элемент формы служит функциональной и семантической цели, заключающейся в хранении входных данных, в то время как fieldset обладает с самого начала особыми, невоспроизводимыми визуальными эффектами. Кроме того, если визуальные элементы в наборе полей каким-либо образом функциональны, семантически набор полей снова содержит набор интерактивных виджетов, что и было исходной точкой.

Мой совет - используйте его, если хотите. Я бы не стал, но не из семантических соображений: я предпочитаю не полагаться на специальные эффекты и предпочитаю форму функции в целом.

В любом случае, вот что стоит подумать:

     < / head>  
 
 foo 
 bar 
 
 
 foo 
 bar 
 
 
    foo    
 
 бар