Question

好吧，我会第一个承认我在css方面非常糟糕，但我试试......：D 我有这个JS函数，我用它来创建使用图像的圆角，而不是div中div的标准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中有一种相当优雅的方式来创建一个圆角：

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

仅在较新的浏览器中支持（例如，IE7仍然具有方形边框）。

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

Answer 2

虽然我确信这对任何人都没有帮助 - 为了完整性我的解决方案是在附加的div而不是传递的div上设置z-index：

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

IE 7 CSS问题

2 个答案: