2011-02-07 2 views
0

Я добавил углы к th с обеих сторон, но на IE7 они не появятся.IE7 Уголки внутри TH

Хуже всего, когда я использую «Insepctor», то есть (F12), и удаляет любую проету со страницы (просто делает страницу снова), они внезапно появляются!

WTF ??

<thead> 
    <tr> 
     <th class="process_table_top" colspan="2"> 
      <div class="corner-2 trp"></div> 
      <div class="corner-2 tlp"></div> 
     <strong>Personal Details</strong> 
     </th> 
     </tr> 
</thead> 

CSS:

.corner-2.tlp{ background:url(/images/buy_process/table-sprite.png);background-position: 0 -18px; width: 5px; height: 4px; top:5px;left:5px;position:absolute;} 
.corner-2.trp{ background:url(/images/buy_process/table-sprite.png);background-position: 0 -27px; width: 5px; height: 5px; top:5px;right:5px;position:absolute;} 
+0

Ваши значения фонового положения кажутся странными для верхних левого и правого углов. Вы также хотите, чтобы в таблице/контейнере была позиция: relative; применяется. – reisio

+0

Я сделал, код уродливый, потому что он пытался много способов справиться с проблемой, все вернулись к той же точке - IE7 отказывается отображать фоновые изображения. – WEBProject

+0

вы можете создать живой пример на http://www.jsbin.com или http://jsfiddle.net/ с вашим спрайтом, чтобы лучше понять, что происходит? – Sotiris

ответ

1

Когда вы укажете position:absolute;, вам также необходимо указать родительский элемент, чтобы иметь position:relative; - в вашем случае это будет элемент <th>.

Если вы не укажете position:relative; для родительского элемента, то position:absolute; элемент будет принимать это позиционирование со следующего элемента вверх по DOM дерева, который имеет position:relative;, вплоть до <body> элемента.

Поэтому решение состоит в том, чтобы поставить position:relative; на ваш <th> элемент (ы).

Вы не указали, являются ли «углы», которые вы делаете, из разнообразия «закругленного угла»? Если это то, что вы пытаетесь сделать, почему бы не выбросить все это из-за использования угловой графики для закругленных углов. Есть гораздо лучшие способы сделать это.

Стандартный способ делать закругленные углы теперь - использовать стиль CSS3 border-radius. Это работает как стандарт во всех браузерах, кроме IE. Вы, возможно, знаете это, но вам, очевидно, нужно, чтобы он работал в IE. Хорошей новостью является то, что есть ряд доступных хаков, которые также делают стиль border-radius для IE.

Мой любимый CSS3Pie. Очень проста в использовании, и вам не нужно беспокоиться о какой-либо дополнительной разметке или графике в вашем HTML-коде.

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

0

IE 7 имеет некоторые цитаты кэширование иногда агрессивный приводит к неожиданному поведению при разработке и тестировании. Вероятно, вы должны использовать Ctrl + F5 для принудительной перезагрузки без использования кеша или очистить кеш до перезагрузки.

+0

Я сделал, я удалил все файлы, связанные с кешем, историю, файлы cookie, все, что вы можете придумать, даже перезапустил мой компьютер и удалил кеширование. Также - я проверил его на IE7 на отдельной виртуальной машине, все еще - ничего. – WEBProject

Смежные вопросы