Question

我在两侧增加了角落，但在IE7上他们不会出现。

甚至最糟糕的是，当我使用ie（F12）的“Insepctor”，并从页面中移除任何意外（只是再次渲染页面）时，它们会突然出现!!

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;}

Answer 1

当您指定position:absolute;时，您还需要指定父元素position:relative; - 在您的情况下，这将是<th>元素。

如果您没有为父元素指定position:relative;，position:absolute;元素将从具有position:relative;的DOM树的下一个元素开始定位，一直向上到<body>元素。

因此，解决方案是将position:relative;放在<th>元素上。

您尚未指定您所制作的“角落”是否属于“圆角”品种？如果这就是你想要做的事情，为什么不抛弃使用圆角图形的整个事物。有更好的方法可以做到这一点。

现在进行圆角的标准方法是使用CSS3样式border-radius。这在IE以外的所有浏览器中都是标准配置。你可能知道这一点，但你显然需要它在IE中工作。好消息是，有许多黑客可以使border-radius样式也适用于IE。

我最喜欢的是CSS3Pie。非常容易使用，您不必担心HTML代码中的任何额外标记或图形。

希望有所帮助。

Answer 2

IE 7有一些引用激进的缓存，有时会在开发和测试时导致意外行为。您可能应该使用Ctrl + F5强制重新加载而不使用缓存，或者在重新加载之前清除缓存。

IE中的IE7角落

2 个答案: