2012-06-27 2 views
2

Я работаю над проектом, где у меня есть стационарный бар (чтобы стать навигационной панелью), а затем прямо под ним прямоугольник, который настроен так, что когда вы щелкните по нему, он перевернется. Ширина как навигационного, так и отбрасывающего div должна быть одинаковой, и они просматриваются в FF, Chrome, Safari, IE ... но когда я только что проверил его в браузере Android, 10 пикселей меньше ширины, чем панель навигации. Я сузил это до того, что я использую «display: table» в div «externalContainer» для вертикального и горизонтального центрирования содержимого «innerContainer» (который настроен на отображение: table-cell). Это пример того, как я в настоящее время настроил его, который отображается правильно во всех браузерах, но ширина браузера в браузере меньше: http://jsfiddle.net/adRP4/9/«display: table» уменьшает отображение div на устройстве Android

Как только я удаляю «display: table» из .outerContainer , он отображается в браузере Android на соответствующей ширине, однако содержимое больше не центрируется, как я хочу. Этот пример показывает дисплей: таблица будет удален надлежащая ширина отображения, но содержание не по центру, как я хочу: http://jsfiddle.net/adRP4/10/

Вертикальный/горизонтальный способ центрирования я основан на: http://www.andy-howard.com/verticalAndHorizontalAlignment/index.html (по аналогии с http://css-tricks.com/vertically-center-multi-lined-text/) ... когда я попытался изменить его на метод, изложенный в ней: http://css-tricks.com/centering-in-the-unknown/ Я столкнулся со всеми проблемами ...

Любые предложения по устранению этого?

UPDATE (6/28) --Я обнаружил, что когда я проверяю в iPhone, у меня точно такое же несоответствие ширины, как и в Android браузер ..

Спасибо, Марк

ответ