CSS问题，在Internet Explorer中显示意外的背景重复

Question

我有一个用于显示正确消息的类。这个类适用于所有浏览器，除了我在Internet Explorer 8中发现错误。

.success{
    border:#060 1px solid;
    margin-left:25%;
    margin-right:25%;
    padding:7px;
    background-color:#D9FF80;
    background-image:url(http://localhost/naju/home/css/css_img/ok.png);
    background-position:left;
    background-repeat:no-repeat;
    padding-left:30px;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:13px;
    color:#003300;
    font-weight:bold;
    -moz-border-radius:5px 5px 5px 5px;
    -moz-box-shadow:0 5px 3px #DDDDDD;
    -webkit-border-radius:5px 5px 5px 5px;
    behavior: url(border-radius.htc);
    }

正如我上面所示，该类包含外部行为（border-radius.HTC），这也显示了Internet Explorer中的圆形边框。但我的问题是，如果我保持这条线：

behavior: url(border-radius.htc);

Internet Explorer显示背景重复。但在上面我设置了背景重复：不重复。如果我删除行为，那就没问题。但是这个问题只出现在Internet Explorer中。我不知道，为什么会如此......如何阻止Internet Explorer中意外的背景重复？请问有什么帮助吗？

HTC文件的内容如下：

--Do not remove this if you are using--
Original Author: Remiz Rahnas
Original Author URL: http://www.htmlremix.com
Published date: 2008/09/24

Changes by Nick Fetchak:
- IE8 standards mode compatibility
- VML elements now positioned behind original box rather than inside of it - should be less prone to breakage
Published date : 2009/11/18


<public:attach event="oncontentready" onevent="oncontentready('v08vnSVo78t4JfjH')" />
<script type="text/javascript">

// findPos() borrowed from http://www.quirksmode.org/js/findpos.html
function findPos(obj) {
    var curleft = curtop = 0;

    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
    }

    return({
        'x': curleft,
        'y': curtop
    });
}

function oncontentready(classID) {
  if (this.className.match(classID)) { return(false); }

    if (!document.namespaces.v) { document.namespaces.add("v", "urn:schemas-microsoft-com:vml"); }

    this.className = this.className.concat(' ', classID);
    var arcSize = Math.min(parseInt(this.currentStyle['-moz-border-radius'] ||
                                    this.currentStyle['-webkit-border-radius'] ||
                                    this.currentStyle['border-radius'] ||
                                    this.currentStyle['-khtml-border-radius']) /
                           Math.min(this.offsetWidth, this.offsetHeight), 1);
    var fillColor = this.currentStyle.backgroundColor;
    var fillSrc = this.currentStyle.backgroundImage.replace(/^url\("(.+)"\)$/, '$1');
    var strokeColor = this.currentStyle.borderColor;
    var strokeWeight = parseInt(this.currentStyle.borderWidth);
    var stroked = 'true';
    if (isNaN(strokeWeight)) {
        strokeWeight = 0;
        strokeColor = fillColor;
        stroked = 'false';
    }

    this.style.background = 'transparent';
    this.style.borderColor = 'transparent';

    // Find which element provides position:relative for the target element (default to BODY)
    var el = this;
    var limit = 100, i = 0;
    while ((typeof(el) != 'unknown') && (el.currentStyle.position != 'relative') && (el.tagName != 'BODY')) {
        el = el.parentElement;
        i++;
        if (i >= limit) { return(false); }
    }
    var el_zindex = parseInt(el.currentStyle.zIndex);
    if (isNaN(el_zindex)) { el_zindex = 0; }
    //alert('got tag '+ el.tagName +' with pos '+ el.currentStyle.position);

    var rect_size = {
        'width': this.offsetWidth - strokeWeight,
        'height': this.offsetHeight - strokeWeight
    };
    var el_pos = findPos(el);
    var this_pos = findPos(this);
    this_pos.y = this_pos.y + (0.5 * strokeWeight) - el_pos.y;
    this_pos.x = this_pos.x + (0.5 * strokeWeight) - el_pos.x;

    var rect = document.createElement('v:roundrect');
    rect.arcsize = arcSize +'px';
    rect.strokecolor = strokeColor;
    rect.strokeWeight = strokeWeight +'px';
    rect.stroked = stroked;
    rect.style.display = 'block';
    rect.style.position = 'absolute';
    rect.style.top = this_pos.y +'px';
    rect.style.left = this_pos.x +'px';
    rect.style.width = rect_size.width +'px';
    rect.style.height = rect_size.height +'px';
    rect.style.antialias = true;
    rect.style.zIndex = el_zindex - 1;

    var fill = document.createElement('v:fill');
    fill.color = fillColor;
    fill.src = fillSrc;
    fill.type = 'tile';

    rect.appendChild(fill);
    el.appendChild(rect);

    var css = el.document.createStyleSheet();
    css.addRule("v\\:roundrect", "behavior: url(#default#VML)");
    css.addRule("v\\:fill", "behavior: url(#default#VML)");

    isIE6 = /msie|MSIE 6/.test(navigator.userAgent);
    // IE6 doesn't support transparent borders, use padding to offset original element
    if (isIE6 && (strokeWeight > 0)) {
        this.style.borderStyle = 'none';
        this.style.paddingTop = parseInt(this.currentStyle.paddingTop || 0) + strokeWeight;
        this.style.paddingBottom = parseInt(this.currentStyle.paddingBottom || 0) + strokeWeight;
    }

    if (typeof(window.rounded_elements) == 'undefined') {
        window.rounded_elements = new Array();

        if (typeof(window.onresize) == 'function') { window.previous_onresize = window.onresize; }
        window.onresize = window_resize;
    }
    this.element.vml = rect;
    window.rounded_elements.push(this.element);
}

function window_resize() {
    if (typeof(window.rounded_elements) == 'undefined') { return(false); }

    for (var i in window.rounded_elements) {
        var el = window.rounded_elements[i];

        var strokeWeight = parseInt(el.currentStyle.borderWidth);
        if (isNaN(strokeWeight)) { strokeWeight = 0; }

        var parent_pos = findPos(el.vml.parentNode);
        var pos = findPos(el);
        pos.y = pos.y + (0.5 * strokeWeight) - parent_pos.y;
        pos.x = pos.x + (0.5 * strokeWeight) - parent_pos.x;

        el.vml.style.top = pos.y +'px';
        el.vml.style.left = pos.x +'px';
    }

    if (typeof(window.previous_onresize) == 'function') { window.previous_onresize(); }
}
</script>

Answer 1

您的behaviour导致了问题。这些通常会尝试重新绘制元素，因此它们基于非常特定的css属性，并且需要固定的宽度和高度。

尝试使用速记来声明背景，如果可能，在元素上设置固定的宽度和高度：

background: #D9FF80 url(http://localhost/naju/home/css/css_img/ok.png) top left no-repeat;

或者使用CSS3 PIE，它支持许多CSS3属性：http://css3pie.com/

Answer 2

我认为它必须与png做点什么。我也有不必要的重复。起初没有问题。然后我把图像缩小了，之后我做了什么并不重要。它一直在重复:( 当我将同一图像更改为jpg或gif时，它会听取css设置。 我的2美分......

Answer 3

htc只是一个javascript，所以任何拥有javascript知识的人都可以修补它。您可以在任何文本编辑器中对其进行编辑。

错误在于htc，在分配背景重复时，它总是放置：fill.type ='tile';

我所做的是读取background-repeat属性并将其分配给变量，然后根据变量的值，它正确设置背景：

找到这一行=＆gt; var fillColor = this.currentStyle.backgroundColor; 就在下方：

var repeat = this.currentStyle.backgroundRepeat;

然后找到折线=＆gt; fill.type = '瓦片'; 并将其替换为：

如果（重复== '不重复'）fill.type = '框架'; else fill.type ='tile';

就是这样！

这是完整的代码：

--Do not remove this if you are using--
Original Author: Remiz Rahnas
Original Author URL: http://www.htmlremix.com
Published date: 2008/09/24
Edited by Jorch72

Changes by Nick Fetchak:
- IE8 standards mode compatibility
- VML elements now positioned behind original box rather than inside of it - should be less prone to breakage
Published date : 2009/11/18

<public:attach event="oncontentready" onevent="oncontentready('v08vnSVo78t4JfjH')" />
<script type="text/javascript">
// findPos() borrowed from http://www.quirksmode.org/js/findpos.html
function findPos(obj){
var curleft = curtop = 0;
if (obj.offsetParent){
    do {
        curleft += obj.offsetLeft;
        curtop += obj.offsetTop;
    } while (obj = obj.offsetParent);
}
return({
    'x': curleft,
    'y': curtop
});
}

function oncontentready(classID){
  if(this.className.match(classID)){return(false);}
  if(!document.namespaces.v){document.namespaces.add("v","urn:schemas-microsoft-com:vml");}
this.className=this.className.concat(' ',classID);
var arcSize=Math.min(parseInt(this.currentStyle['-moz-border-radius']||this.currentStyle['-webkit-border-radius']||
this.currentStyle['border-radius']||this.currentStyle['-khtml-border-radius'])/Math.min(this.offsetWidth,this.offsetHeight),1);
var repeat=this.currentStyle.backgroundRepeat
var fillColor=this.currentStyle.backgroundColor;
var fillSrc=new String(this.currentStyle.backgroundImage.replace(/^url\("(.+)"\)$/, '$1'));
var strokeColor=this.currentStyle.borderColor;
var strokeWeight=parseInt(this.currentStyle.borderWidth);
var stroked='true';
if(isNaN(strokeWeight)){
    strokeWeight=0;
    strokeColor=fillColor;
    stroked='false';
}
this.style.background='transparent';
this.style.borderColor='transparent';

// Find which element provides position:relative for the target element (default to BODY)
var el = this;
var limit = 100, i = 0;
while ((typeof(el) != 'unknown') && (el.currentStyle.position != 'relative') && (el.tagName != 'BODY')) {
    el = el.parentElement;
    i++;
    if (i >= limit) { return(false); }
}
var el_zindex = parseInt(el.currentStyle.zIndex);
if (isNaN(el_zindex)) { el_zindex = 0; }
//alert('got tag '+ el.tagName +' with pos '+ el.currentStyle.position);

var rect_size = {
    'width': this.offsetWidth - strokeWeight,
    'height': this.offsetHeight - strokeWeight
};
var el_pos = findPos(el);
var this_pos = findPos(this);
this_pos.y = this_pos.y + (0.5 * strokeWeight) - el_pos.y;
this_pos.x = this_pos.x + (0.5 * strokeWeight) - el_pos.x;

var rect=document.createElement('v:roundrect');
rect.arcsize = arcSize +'px';
rect.strokecolor = strokeColor;
rect.strokeWeight = strokeWeight +'px';
rect.stroked = stroked;
rect.style.display = 'block';
rect.style.position = 'absolute';
rect.style.top = this_pos.y +'px';
rect.style.left = this_pos.x +'px';
rect.style.width = rect_size.width +'px';
rect.style.height = rect_size.height +'px';
rect.style.antialias = true;
rect.style.zIndex = el_zindex - 1;

var fill=document.createElement('v:fill');
fill.color=fillColor;
fill.src=fillSrc;
fill.type='Frame';
  if(repeat=='no-repeat')fill.type='Frame';
  else fill.type='tile';

rect.appendChild(fill);
el.appendChild(rect);

var css=el.document.createStyleSheet();
css.addRule("v\\:roundrect","behavior:url(#default#VML)");
css.addRule("v\\:fill","behavior:url(#default#VML)");

isIE6 = /msie|MSIE 6/.test(navigator.userAgent);
// IE6 doesn't support transparent borders, use padding to offset original element
if (isIE6 && (strokeWeight>0)) {
    this.style.borderStyle='none';
    this.style.paddingTop=parseInt(this.currentStyle.paddingTop || 0) + strokeWeight;
    this.style.paddingBottom=parseInt(this.currentStyle.paddingBottom || 0) + strokeWeight;
}
if(typeof(window.rounded_elements)=='undefined'){
    window.rounded_elements = new Array();
    if(typeof(window.onresize)=='function'){window.previous_onresize=window.onresize;}
    window.onresize=window_resize;
}
this.element.vml=rect;
window.rounded_elements.push(this.element);
}

function window_resize(){
if(typeof(window.rounded_elements)=='undefined'){return(false);}
for(var i in window.rounded_elements){
    var el = window.rounded_elements[i];
    var strokeWeight = parseInt(el.currentStyle.borderWidth);
    if (isNaN(strokeWeight)){strokeWeight=0;}
    var parent_pos=findPos(el.vml.parentNode);
    var pos=findPos(el);
    pos.y=pos.y+(0.5*strokeWeight)-parent_pos.y;
    pos.x=pos.x+(0.5*strokeWeight)-parent_pos.x;
    el.vml.style.top=pos.y+'px';
    el.vml.style.left=pos.x+'px';
}
if(typeof(window.previous_onresize)=='function'){window.previous_onresize();}
}
</script>