проблемы с позиционированием и размером шрифта в iPhone Safari - PullRequest
Новая
       14

проблемы с позиционированием и размером шрифта в iPhone Safari

1 голос
/ 28 сентября 2011

Я пытаюсь сделать этот сайт: http://501commons.org рендерится так же на iPhone, как и в других браузерах.На Android работает просто отлично.Я уже добавил -webkit-text-size-adjust: 100%; к типу кузова, что немного помогло.То, что все еще не работает, это следующие части, и я не могу понять, почему мобильное сафари не отображает их должным образом:

  • просто левый верхний логотип просто не будет отображаться
  • поле поиска в правом верхнем углу слишком далеко налево
  • красный слоган в заголовке «Ресурс для некоммерческих организаций и т. Д.» Слишком велик, слишком низок и простирается за правую границу
  • слишком большой шрифт трех пунктов меню навигации (Explore the Commons, Volunteer, Invest)

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

Любая помощь будет принята с благодарностью!Спасибо!

1 Ответ

2 голосов
/ 22 октября 2011

Я понял:

Верхний левый логотип

Логотип, который не отображается, был вызван странной не каскадной проблемой.Логотип представляет собой вкладку <img> внутри <a id="portal-logo" ...>.У #portal-logo есть правило display: inline-block; в следующей за последней таблице стилей, которая применяется к нему, но не в последней.Другими словами, это то, что у нас есть: 

#portal-logo {       /* in the last CSS file */
   margin-bottom: 0;
}

#portal-logo {      /* in the next-to-last CSS file */
   display: inline-block;
   margin: 1.375em 0;
}

Добавление display: inline-block; к последней таблице стилей волшебным образом заставляет логотип появиться.Затем мне пришлось также поиграться с margin s, position, top и т. Д., Чтобы он отображался в нужном месте, но все это в файле CSS, который загружается условно только в мобильных браузерах, так что все в порядке,Просто очень странно, что Safari на iOS не поддерживает каскадный стиль display: inline-block;!

Поле поиска

Я сделал окно поиска в нужном месте, добавивtext-align:right; к его контейнеру, хотя более раннее правило для того же контейнера с text-align:left; делает его прекрасно работающим в любом другом браузере.

Слоган

Слоган требовал максимально доработки.Содержится в <div id="slogan">.Вот старое правило: 

#slogan {
  color: #EE3524;
  float: right;
  font-size: 110%;
  font-weight: bold;
  margin-right: -190px;
  padding-top: 60px;
  position: relative;
  z-index: 1;
}

А вот новое правило, которое работает на мобильном сафари: 

#slogan {
  -webkit-text-size-adjust: 100%;
  clear:right;
  color:#ee3524;
  font-size:17.6px;
  font-weight: bold;
  float:right;
  margin-right:0px;
  padding-bottom:50px;
  padding-top:0px;
  position:relative;
  text-align:right;
  z-index:1;
}

Одним из ключевых отличий является абсолютное font-size в пикселях,вместо значения в%.

Шрифт пунктов меню

Аналогичным образом, здесь указывается font-size в пикселях вместо%:

Старый: 

#portal-globalnav li a {
  background-color: transparent;
  color: #FFFFFF;
  font-size: 1.2em;
  font-weight: bold;
  min-width: 3em;
  padding-bottom: 11px;
}

Новый: 

#portal-globalnav li a {
  background-color:transparent;
  color:#fff;
  font-size:15.4px;
  font-weight:bold;
  padding-bottom:11px;
  min-width:3em;
}

YMMV!

...