Sutar
BANNED | Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору Здравствуйте, посоветуйте как лучше сделать, следующую задачу, для максимальной совместимости в разных брандмауэрах пользователей. Есть 9 картинок. Их необходимо расположить по таким позициям: (Верхний левый угол no-repeat, 24х23) (Средине верхней части repeat-x) (Верхний правый угол no-repeat, 24х23) (Левый центральный блок, repeat-y) (Средина 1х1, полная заливка, ширина 800px) (Правый центральный блок, repeat-y) (Нижний левый угол no-repeat, 24х23) (Средина нижней части repeat-x) (Нижний правый угол no-repeat, 24х23) я пробовал сделать так: Код: <style> .tpage1 {background: url('/inew/1/top_left.png') no-repeat; width: 24px; height: 23px; display: table-cell;} .tpage2 {background: url('/inew/1/top_body.png') repeat-x; width: 800px; height: 23px; display: table-cell;} .tpage3 {background: url('/inew/1/top_right.png') no-repeat; width: 24px; height: 23px; display: table-cell;} .bpage1 {background: url('/inew/1/body_left.png'); width: 24px; display: table-cell;} .bpage2 {background: url('/inew/1/body_body.png'); width: 800px; display: table-cell; color: #a1a1a1; text-shadow: 0 2px 1px rgba(0, 0, 0, 0.6); font-size: 13px; line-height: 18px;} .bpage3 {background: url('/inew/1/body_right.png'); width: 24px; display: table-cell;} .botpage1 {background: url('/inew/1/bottom_left.png') no-repeat; width: 24px; height: 23px; display: table-cell;} .botpage2 {background: url('/inew/1/bottom_body.png') repeat-x; width: 800px; height: 23px; display: table-cell;} .botpage3 {background: url('/inew/1/bottom_right.png') no-repeat; width: 24px; height: 23px; display: table-cell;} </style> <div><div class="tpage1"></div><div class="tpage2"></div><div class="tpage3"></div></div> <div><div class="bpage1"></div><div class="bpage2">Тут типо текст</div><div class="bpage3"></div></div> <div><div class="botpage1"></div><div class="botpage2"></div><div class="botpage3"></div></div> | но не устраивает следующие пункты: 1. Присутствует display: table-cell; (в EI7 < он не работает) 2. Необходимо задавать width: 800px; в верхней и нижней центральной части, как это убрать? Есть ещё способы использовать примерно такой вариант: Код: <div class="tpage1"><div class="tpage3"><div class="tpage2"></div></div></div> | или с использованием before и after в .tpage2 Код: <div class="tpage2"></div> | или через <table>, что самое не желательное. Что лучше всего выбрать? |