Создание CSS-рендеринга аналогичным способом в FireFox 3.0.15 / IE 6.0 и 7.0 - PullRequest
2 голосов
/ 26 мая 2010

Следование CSS по-разному зависит от браузера (в основном с Firefox) Firefox: border-left-style: dashed не работает должным образом, вместо этого отображаются черные линии.

Я сделал снимки экрана

FF ->

http://pixpin.com/images/81898090171964887806.jpg

IE6 -> http://pixpin.com/images/32538710129638992535.jpg

Также шрифт, кажется, является еще одной проблемой, использующей em, поскольку они реагируют относительно лучше в кросс-браузерной среде. Когда я использовал пиксель, это беспорядок, но я не уверен, что они лучше или нет.

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

.Main

{ семейство шрифтов: Arial, "Trebuchet MS", Sans-Serif; размер шрифта: 0,8em;
границы: 0px; } .Header { семейство шрифтов: Arial, "Trebuchet MS", Sans-Serif; размер шрифта: 1,2em; цвет: # 666; background: url ("../ images / header.jpg") repeat-x верхний левый; отступ слева: 10 пикселей;
обивка: 4px; текст-преобразования: заглавные буквы; границы: 1px; границы коллапса: крах; границы снизу ширина: тонкая; границы слева стиль: пунктирная;

} .Footer { цвет: # 666; семейство шрифтов: Arial, "Trebuchet MS", Sans-Serif; размер шрифта: 0,7em; } . Футер тд {стиль границы: нет; выравнивания текста: центр; }

. Размах нижнего колонтитула { цвет: # 666; семейство шрифтов: Arial, "Trebuchet MS", Sans-Serif; размер шрифта: 0,7em; начертание шрифта: жирный; текст-отделка: подчеркнуть; стиль границы: нет; }

. Нижний колонтитул { семейство шрифтов: Arial, "Trebuchet MS", Sans-Serif; размер шрифта: 0,7em; цвет: # 666;

}

.Результаты-позиции, тд { поле слева: 10 пикселей; вертикально-Align: средний; цвет: # 666; цвет фона: белый; размер шрифта: 1,2em; обивка: 4px; семейство шрифтов: Arial, "Trebuchet MS", Sans-Serif; отступ слева: 10px;
высота строки: 20 пикселей; границы: 1px; границы коллапса: крах; границы снизу ширина: тонкая; границы слева стиль: пунктирная; }

.Результаты-AltItem td { поле слева: 10 пикселей; вертикально-Align: средний; цвет: # 666; размер шрифта: 1,2em; / * _font-size: 1.2em; / * IE6 взломать * / обивка: 4px; семейство шрифтов: Arial, "Trebuchet MS", Sans-Serif; цвет фона: #ccc; отступ слева: 10px;
высота строки: 20 пикселей; границы: 1px; границы: 1px; границы коллапса: крах; границы снизу ширина: тонкая; границы слева стиль: пунктирная;

}

Сумма

{ выравнивания текста: справа; }

Ответы [ 3 ]

2 голосов
/ 26 мая 2010

Лучший способ избежать этих ошибок - использовать базу стандартизации (сброса) CSS, например, предоставленную blueprint .

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

РЕДАКТИРОВАТЬ: Это все, что вам нужно для установки базового плана:

<link rel="stylesheet" href="/css/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="/css/blueprint/print.css" type="text/css" media="print">
<!--[if lt IE 8]><link rel="stylesheet" href="/css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
1 голос
/ 27 мая 2010

Отображение только CSS означает только половину изображения и без html делает все, что говорит дикая догадка. В любом случае, Firefox показывает то, что вы написали, в то время как IE все исправляет. Никогда, никогда не доверяйте IE делать все правильно. Всегда, всегда используйте современный браузер (что угодно, кроме IE) для первоначальной проверки вашей разметки. Но множество ошибок и извращений в IE хорошо известно, так же как и хаки, чтобы это исправить.

Ссылка на оскорбительную страницу стоит тысячи догадок по этой проблеме.

0 голосов
/ 26 мая 2010

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

Поместите это в <head> вашей HTML-страницы:

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="path-to-file/ie.css">
<![endif]-->

И настройте несколько различных CSS, которые работают для IE в этой таблице стилей.

Важно: border-left-style: dashed; действительно для Firefox, проверьте свой каскад на наличие левых атрибутов границы, поставьте его после border-collapse:collapse в своем CSS, также добавьте ; в конце этого править. Оно не требуется для последнего правила в селекторе CSS, но при его переключении обязательно добавьте его.

Надеюсь, это поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...