Блог

Я работал над небольшим слайдером для фотографий. В Chrome это выглядит немного иначе, чем в FF, поэтому я подумал, что сброс CSS сделает их оба одинаковыми. Я использовал Yahoo! Модель сброса YUI CSS, но ничего не изменилось. В FF это выглядит неплохо, но в Chrome кнопка «Возобновить» с правой стороны торчит слишком высоко, а тонкая серая линия внизу больших изображений обрезается там, где расположены основные кнопки. Вот URL:

http://www.replayground.com/slider/02.html

Вы можете игнорировать то, что находится под кругами. Просто тестирую там кое-что.

Вот что я добавил в свой 02.html файл:

 <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css">
  

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

Сброс CSS не предназначен для того, чтобы сделать всю остальную часть CSS кроссбраузерной. Он предназначен для установки всех клиентских правил по умолчанию во всех разных браузерах на одно и то же, чтобы вы всегда работали с предсказуемым набором правил CSS. То, как браузеры интерпретируют эти правила, по-прежнему зависит от каждого из них.

В вашем случае вам все еще нужно выяснить, как написать правила CSS, которые работают одинаково как в Chrome, так и в FF — сброс просто немного выравнивает вашу отправную точку, он не устраняет различия в рендеринге браузера.

Вы можете найти кроссбраузерный CSS -фреймворк (напримерblueprintcss.org или 960.gs ) чтобы быть более полезным в вашей текущей ситуации. Они часто используют сброс, но также имеют правила, которые компенсируют различия в рендеринге правил CSS после сброса.

jball очень прав насчет сброса. Они просто позволяют вам начать с пустой страницы, но вы все равно должны написать правильную структуру документа и хороший CSS, чтобы получить хорошие и последовательные результаты.

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

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

Я взял на себя смелость создать небольшой пример, который показывает лишь некоторые основы позиционирования. Он не идеален и использует яркие границы вместо изображений для макета. Но это только для того, чтобы показать вложенность элемента и абсолютное и относительное позиционирование, а также трюк с отрицательным полем. http://jsfiddle.net/YwCxQ/3 /