Что может привести к тому, что элемент <p>не будет занимать всю ширину в браузере Android - PullRequest
Новая
       3

Что может привести к тому, что элемент <p>не будет занимать всю ширину в браузере Android

5 голосов
/ 23 марта 2012

Меня попросили взглянуть на странную проблему и не понять ее.В основном

элементы обычно занимают всю ширину, поскольку они являются блочными элементами, но на некоторых страницах они, кажется, не хотят.Я проверил это на Android по умолчанию ICS и Dolphin, и он работает на обоих.Этот вопрос подводит итог проблемы, только ответ не работает: Почему браузер Android не охватывает этот абзац по всей ширине браузера?

ОБНОВЛЕНИЕ: Странное решение?Если я установлю следующий CSS p {background: #fff;} это решает проблему, которая может вызвать некоторые странные проблемы.Проблема в том, что мне нужен прозрачный фон.

Ответы [ 8 ]

10 голосов
/ 22 ноября 2012

Это взлом, но я решил установить фон: url ('');на мой абзац и заголовки тегов.Мне нужно, чтобы мой фон был прозрачным, поэтому я не могу установить цвет.

Странно установка фона: rgba (0,0,0,0);по какой-то причине тоже не работает?

Если вы хотите быть в безопасности и действительно предоставить действительный URL-адрес изображения, вы можете использовать:

background: url (data: image / png; base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQIW2NkAAIAAAoAAggA9GkAAAAASUVORK5CYII =);

Это прозрачный однопиксельный фон base64 100%.

Я отмечу, что эта ситуация возникла только для меня, когда я установил область просмотра на 640, чтобы мобильный сайт масштабировался нормально длялюбой мобильный браузер.

Похоже, это ошибка с масштабированием области просмотра, которая работает неправильно из того, что я могу сказать.

4 голосов
/ 04 октября 2012

Эта поездка в порядке.
Я установил свой Android на автоматическое заполнение страниц, исправил проблему.
Затем я настраиваю свой телефон на автоматическое подгонку страниц, добавляю его к <p> в моем css background: black;, и он исправляется.
Еще одна странность в том, что в моей таблице стилей, если я установил p{ text-align: center}, <p> охватывает весь путь, как я и ожидал, с моим телефоном, настроенным на автоматическое подгонку страниц и без настройки фона. Я тоже сделал text-align: right, работает как положено. Затем я изменил text-align: left, теперь он снова сломан. Очень, очень странная проблема здесь ...

2 голосов
/ 18 мая 2013

Вместо использования <p>, <div> или других тегов внутри <td>, вы можете просто использовать <span> и добьетесь цели.Кажется, что начиная с android 4, у интернет-браузера по умолчанию есть некоторые проблемы с интерпретацией.Я тестировал ранее на Android 2, и он работает нормально без каких-либо "настроек".

2 голосов
/ 02 марта 2013

Это также верно для тега <li>. Та же проблема. Я исправил обе проблемы, добавив p, li {background: url('');} к моей таблице стилей CSS.

1 голос
/ 23 марта 2012

Исходя из этого вопроса и вашего предыдущего вопроса, кажется, нет очевидной причины, почему он не должен работать.Однако, что-то, что произошло ДЕЙСТВИТЕЛЬНО назад, было, если вы не объявили (в некоторых неназванных браузерах) определенные атрибуты, свойства не будут inherit такими, какими они должны были быть.

Поскольку нет никаких причинчто <p> должен отображаться таким образом, И предыдущая проблема была известной, я бы порекомендовал установить width из <body> в 100%, так как это может быть случай утраты наследства.

РЕДАКТИРОВАТЬ: Альтернатива

Другое популярное решение ранее упомянутой проблемы состояло в том, чтобы обернуть нарушающие элементы в <div> класса container, который имел указанный width.Оба, как правило, являются жизнеспособными решениями, которые значительно улучшают кросс-браузерную согласованность.

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

0 голосов
/ 28 сентября 2016

Возможно, это не тот ответ, который вам нужен, но я обнаружил, что он работает, если вы указываете свойство CSS display:inline; вместо значения по умолчанию display:block;, оно больше не будет охватывать весь экран.Я не совсем уверен, работает ли это на Android (у меня его нет), но у меня была похожая проблема на моем ноутбуке, и это исправило ее.

0 голосов
/ 11 февраля 2013

У меня одна и та же проблема на 2 разных сайтах. Мне пришлось обойти это, установив прозрачное фоновое изображение PNG.

В моем случае p-элементы имели точно такую ​​же ширину, как ширина экрана устройства, поэтому вращение устройства изменило ширину p-элементов.

Даже установка фиксированной ширины с помощью! Important на p была проигнорирована!

0 голосов
/ 19 июня 2012

Я нашел решение этой проблемы, которое действительно работает !!Это на самом деле параметр в браузере Android "Auto-Fit Pages".Отключение этой опции решит эту проблему с уверенностью.

Mike

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

Нет похожих вопросов

...