IE7 Corners inside a TH
I've added corners to a th on both sides, but on IE7 they wont show up.
Even worst , when I use the "Insepctor" of ie (F12), and removes any propety from the page (simply renders the page again), they suddenly show up!!
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.pn开发者_开发问答g);background-position: 0 -27px; width: 5px; height: 5px; top:5px;right:5px;position:absolute;}
When you specify position:absolute; you need to also specify the parent element to have position:relative; - in your case, this would be the <th> element.
If you don't specify position:relative; for the parent element, the position:absolute; element will take it's positioning from the next element up the DOM tree that has position:relative;, all the way up to the <body> element.
Therefore the solution is to put position:relative; on your <th> element(s).
You haven't specified whether the "corners" you're making are of the "rounded corner" variety? If that's what you're trying to do, why not throw away the whole thing of using corner graphics for the rounded corners. There are much better ways to do this.
The standard way of doing rounded corners now is to use the CSS3 style border-radius. This works as standard in all browsers except IE. You possibly know this, but you obviously need it to work in IE. The good news is that there are a number of hacks available which make the border-radius style work for IE as well.
My favourite is CSS3Pie. Very easy to use, and you don't have to worry about any extra markup or graphics in your HTML code.
Hope that helps.
IE 7 has some quote agressive caching which sometimes leads to unexpected behaviour when developing and testing. You probably should use Ctrl+F5 to force a reload without using the cache, or clear the cache before a reload.
加载中,请稍侯......
精彩评论