#html #css #google-chrome #rendering
#HTML #css #google-chrome #рендеринг
Вопрос:
Итак, у меня здесь есть простой стиль, ранее Chrome отображал его так же, как FF — вот так
и вдруг я смотрю на свой документ в Chrome и вижу это
совсем не прозрачные тени =( Что делать с tham — как исправить?
Мой код CSS:
body{padding: 5px;background-color: #FFF;font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif}
h1,h2,p{margin: 0 10px}
h1,h2{font-size: 250%;color: #FFF; text-shadow: 0px 1px 1px #000;}
h2{font-size: 120%;}
div#nifty{ margin: 0 1%;background: #9BD1FA}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
p{color: #000;text-shadow: 0px 1px 1px #fff;padding-bottom:0.3em}
input[type="button"], .eButton {width: 150px;padding: 5px 10px;word-wrap: break-word;height: auto;}}
::-moz-selection { background-color: #fbfdfe; color: #ff6c24; text-shadow: 0px 1px 1px #258ffd;}
::selection { background-color: #fbfdfe; color: #fff; text-shadow: 0px 1px 1px #258ffd;}
Комментарии:
1. Отлично смотрится в Chrome 14.0.835.202 и 16.0.903 в OS X 10.7.
2. Windows Chrome 14.0.835.202 m доставляет мне проблему, 16.0.903.0 canary работает действительно странным образом — сначала он плохо отображает его, но через несколько секунд он перенаправляет его в sutable FF подобным образом.
3. Chrome 15.0.874.83 beta-m на XP имеет ту же проблему для меня. Кроме того, вы пишете ввод как ‘inpuut’.
4. Windows XP Chrome 14.x и Chrome 2.x отображаются плохо. Должно быть, это ошибка рендеринга того же типа, потому что изменение размера шрифта на 260% устраняет проблему.
5. Это известная проблема: crbug.com/23440
Ответ №1:
Если вы ищете полупрозрачные тени, вы можете попробовать использовать значения rgba вместо шестнадцатеричных значений. Так что это было бы:
h1 { text-shadow: 1px 1px 1px rgba(0,0,0,.20); }
где первые три числа — это значение RBG (красное, зеленое, синее), а четвертое число — непрозрачность (от 0 до 1). Итак, приведенный выше пример черного цвета с непрозрачностью 20%.
Кроме того, странный вес тени, похоже, зависит от значения размытия в text-shadow . Когда я меняю его на 1px 1px 0 , он дает более равномерную тень, чем 0px 1px 1px . Понятия не имею, почему.