Я проектирую веб-сайт и тестирую его на своем мобильном телефоне LG VX8360, работающем под управлением Openwave Mobile Browser 6.2.3.2.На моем сайте многие вещи выглядели не так, и я заметил, что браузер неправильно обрабатывает дочерние или дочерние селекторы CSS.Я сделал страницу, подобную этой:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Mobile test</title>
<style type="text/css">
div div {
background: yellow}
</style>
</head>
<body>
<div>test 1 - this div should have no background</div>
<br>
<div><div>test2 - this div should have a yellow background</div></div>
</body></html>
Я бы ожидал, что у второго элемента Div будет желтый фон, но на моем телефоне оба элемента были желтыми.Что я могу сделать по этому поводу?Кто-нибудь знает какой-то обходной путь?Я посмотрел в Google и не смог найти ничего полезного.
РЕДАКТИРОВАТЬ: Я хотел бы добавить, что я обслуживаю страницу с заголовком "Cache-Control: no-transform",поэтому я сомневаюсь, что что-то меняется с помощью прокси или транскодера.
Я провел несколько тестов, предложенных Фелипе.Я вижу то же самое, независимо от того, есть ли у меня точка с запятой после объявления.Я попытался избавиться от элемента style и поместить желтый фон в атрибут style во внутреннем тестовом 2 div, и все заработало как положено.Я попытался добавить "div {background: red;}", и оба div были все еще желтыми.Я переключился между тестами 1 и 2, и оба были желтыми.
Кроме того, я попытался получить доступ к этому коду:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Mobile test</title>
<style type="text/css">
div {
background: red;}
.foo div {
background: yellow;}
</style>
</head>
<body>
<div>test 1 - this div should be red.</div>
<br>
<div class="foo"><div>test 2 - this div should be yellow.</div></div>
</body></html>
, и оба div были красного цвета.Я сделал что-то подобное с идентификатором вместо класса, и оба div были красного цвета.
Затем я попытался поместить класс во внутренний div и выбрать его с помощью селектора «div.foo» или просто «.foo»."И это работало нормально, по-видимому, потому что это не предполагает выбора дочерних элементов или потомков.То же самое, если вместо этого я использую идентификаторы.
Я попытался установить кодировку на ISO-8859-1, и все произошло так же, так что я думаю, что это не имеет никакого отношения к проблеме.Я удалил метатег, и все было по-прежнему.
Я попытался поместить CSS во внешний файл.Когда я включаю его, используя элемент ссылки, я вижу те же результаты, что и раньше.Если я пытаюсь включить его с помощью @import, я не вижу никаких стилей.Мой телефон не может получить доступ к файлам CSS, на которые ссылается @ import.
Излишне говорить, что это сводит меня с ума.Чем больше тестов я провожу, тем страннее выглядит ситуация.Что я могу с этим поделать?
РЕДАКТИРОВАТЬ 2: Конечно, я могу купить новый телефон, но я пытаюсь создать сайт, который работает на любом устройстве с интернет-подключением.
РЕДАКТИРОВАТЬ 3: Я посмотрел это руководство по совместимости с мобильными CSS и не смог найти что-либо, касающееся моего браузера.Я собираюсь проверить сообщения в блоге.
РЕДАКТИРОВАТЬ 4: Я не могу найти какую-либо всестороннюю, объективную информацию о том, какие функции CSS этот браузер делает или не делаетподдержка, и как обойти проблемы.Если бы это был неясный, устаревший, непопулярный браузер, я бы просто забыл об этой проблеме.Однако несколько дней назад я зашел в магазин Verizon, чтобы протестировать свой сайт на некоторых своих телефонах, и обнаружил довольно много совершенно новых телефонов, которые, по-видимому, имели ту же версию этого браузера с ошибками.