javascript - IE 7 CSS 问题

Question

好吧，我会第一个承认我在 css 方面很糟糕，但我尝试...:D 我有这个 JS 函数，我用它来使用图像创建圆 Angular ，而不是标准的 div in div in div 方式。我知道有更好的方法，但我是这样做的:

function applyHorizontalImageCornersSpecific(div, left, middle, right, leftWidth, rightWidth, height, type) {
    var title = div.html();
    div.html("");
    div.append('<div>' + title + '</div>');
    div.css("position", "relative");
    div.css("z-index", "2");
    div.prepend('<img src="' + left + '" style=" position:absolute; width:' + leftWidth + ';z-index:-1;"/>');
    div.prepend('<img src="' + middle + '" style=" position:absolute;z-index:-2; width:100%; height:' + height + '; "/>');
    //div.prepend('<div style="position:relative; margin-left:' + leftWidth + ';margin-right:' + rightWidth + ';"><img src="' + middle + '" style="position:absolute;z-index:-2; width:100%; height:' + height + '; "/></div>');
    div.prepend('<img src="' + right + '" style=" position:absolute; width:' + rightWidth + '; right:0px;z-index:-1;"/>');
    div.css("height", height);
}

div 是传递给函数 $("#divid") 的 div 对象。 左、中、右是图像位置。 leftwidth、rightwidth 和 height 很容易解释。

现在的问题 - 使用 IE 8，div(这是一个圆形标题栏)在使用注释掉的行时完美绘制

div.prepend('<div style="position:relative; margin-left:' + leftWidth + ';margin-right:' + rightWidth + ';"><img src="' + middle + '" style="position:absolute;z-index:-2; width:100%; height:' + height + '; "/></div>');

和事件线

div.prepend('<img src="' + middle + '" style=" position:absolute;z-index:-2; width:100%; height:' + height + '; "/>');

但 IE 7 仅适用于事件行。

左边和中间的图像是在 IE 7 中绘制的，但不是右边的图像和 div 内容(标题)。

IE 7 和 IE 8 的事件线使左右图像无用，因为它们(左和右)都位于中心图像上方，因此任何透明度仅显示中心图像而不显示主体背景。

一如既往，我们非常感谢您的帮助。

Answer 1

如果您还没有意识到这一点，CSS 中有一种创建圆 Angular 的相当优雅的方法:

-moz-border-radius: 15px; /* where the 15px is the degree of rounding */
border-radius: 15px;

这仅在较新的浏览器中受支持(例如，IE7 仍将具有方形边框)。

另外，我注意到你说这是一个圆形的标题栏。如果您只是使用像 GIMP 或 PS 这样的照片编辑软件来创建一个圆形图像，那不是更容易吗？这将解决跨浏览器兼容性的问题以及侵入性 JavaScript 无法正常降级的问题(如果禁用 JavaScript，用户将无法获取图像!)