2012-07-05 2 views
1

Многие CSS resets устранить поле <fieldset> граница тега, отступы и маржа. Я полагаю, это делается для обеспечения равномерного отображения всех браузеров. Тем не менее, наборы полей уже не визуально разделяют группы элементов HTML (формы) после сброса.Получить <fieldset> border назад после сброса CSS

Два вопроса:

  1. ли браузеры на самом деле делают <FIELDSET> без сброса по-разному?
  2. Каков наилучший метод получения обрамления «bordered» после сброса CSS? Просто рестайлинга это так:

    fieldset { 
        border: 1px solid silver; 
        margin: 2px; 
        padding: 7px; 
    } 
    

Некоторые образы того, что я описываю:

Без сброса: enter image description here

С сброса: enter image description here

+0

Вы можете использовать важные заявления после каждого свойства в CSS!. – Exor

+1

@Exor '! Important' почти всегда является признаком того, кто не знает, что они делают! –

+0

@Kolink: О, я думал, что! Важная декларация дает возможность автору таблицы стилей придавать значение CSS больше веса, чем он, естественно, имеет. Любой способ спасибо за подсказку :) – Exor

ответ

2

легкий ответ : не используйте сброс! Они не нужны, если у вас есть ключ к пониманию того, что вы делаете.

Например, если вы используете сброс, вы теряете любые собственные стили пользовательского интерфейса, такие как, в данном случае, поля. В IE, например, у неэтилированного набора полей будет граница с слегка закругленными углами, как и в полях в собственных программах. Сброс удаляет это, и non-native UI sucks.

Однако, если вы настаиваете, просто убедитесь, что стили определены в правильном порядке. Сброс должен быть абсолютным первым, а затем «un-resetets». Понимаете, это избыточно!

+0

Потеря родного стиля пользовательского интерфейса - именно то, почему люди используйте сброс – Kulvar

+0

@ Kulvar Но это плохо. Собственный интерфейс помогает поддерживать знакомство с пользователями. –

+0

Люди не заботятся о том, чтобы люди привыкли к родному пользовательскому интерфейсу, люди хотят, чтобы их сайт был красивым. Собственный интерфейс не является красивым, поэтому собственный пользовательский интерфейс переопределяется. Иногда с дополнительными DOM и JavaScript, когда вы должны изменить внешний вид элементов формы. Они платят за это, поэтому мы это делаем. – Kulvar

2

У меня была аналогичная проблема - то, что я сделал это я скопировал стиль от Normalize.css палке это после того, как CSS сброса

fieldset { 
    border: 1px solid #c0c0c0; 
    margin: 0 2px; 
    padding: 0.35em 0.625em 0.75em; 
} 

/** 
* 1. Correct `color` not being inherited in IE 8/9/10/11. 
* 2. Remove padding so people aren't caught out if they zero out fieldsets. 
*/ 

legend { 
    border: 0; /* 1 */ 
    padding: 0; /* 2 */ 
}