Как найти конфликт между моим CSS и JQuery UI CSS?

Question

Я использую пользовательский интерфейс JQuery на моем сайте, например, для создания кнопок. Похоже, что мои таблицы стилей мешают работе с JQuery UI CSS, потому что размер шрифта кнопки слишком велик. Как я могу узнать, что является причиной проблемы? Я установил Firebug 1.7 на FF 4.0, но вижу, что он в основном использует JUI CSS из и из моей таблицы стилей, только некоторые производные стили, которые не должны влиять на размер шрифта кнопки. Может кто-нибудь помочь, как сделать так, чтобы кнопки выглядели так, как должны?

Тестовая страница: http://kangurek24.pl/test/loginform.jsp.htm

Answer 1

font-size: 18px; взято из правила CSS jQuery UI в строке 59 jquery-ui.css.

.ui-widget {
    /* snip */
    font-size: 1.1em;
}

Размер шрифта по умолчанию - 16px, а 1.1 * 16 = 17.6 ≅ 18.

.

Чтобы придать кнопкам одинаковый размер шрифта с остальным текстом, добавьте это правило в свой пользовательский CSS:

.ui-button {
    font-size: .91em; /* ≅ 1/1.1 */ 
}

Убедитесь, что ваш пользовательский CSS идет после CSS jQuery UI.

Answer 2

Вы можете переопределить его в своей собственной таблице стилей с помощью:

#mainouter .ui-widget{font-size:1em;} 

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

Добавление идентификатора в начало селектора повышает его специфичность, и это правило выигрывает у jquery.

Далее, в качестве подсказки, я бы удалил размер шрифта: 100% из mainouter в style.css, (строка 24) - он дает вашему H2 очень маленький шрифт.

Как правило, я не указываю размеры шрифта для контейнерных блоков, особенно с относительным размером шрифта (в процентах и ​​ems), так как трудно управлять наследованием.