CSS Reset не работает - PullRequest
       69

CSS Reset не работает

0 голосов
/ 15 октября 2011

Я работал над небольшим слайдером фотографий.В 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.Не то, как исправить конкретную проблему с кнопками, которую вы видите.Поскольку я добавляю элементы на страницу, мне не нужно каждый раз проходить через это.

Ответы [ 2 ]

3 голосов
/ 15 октября 2011

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

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

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

0 голосов
/ 15 октября 2011

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

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

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

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

...