首页 > > 网页制作 > css >

常见浏览器兼容性问题及解决方案

2018-06-24 01:46:31来源：未知 阅读 ()

新老客户大回馈,云服务器低至5折

问题一：背景颜色透明（设置background的rgba属性在ie下的兼容性问题）

解决方案：

.box{
    background:rgba(0,0,0,0.5);
    filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000); //ie下使用滤镜
 }

 

 

问题二：圆角、阴影

解决方案：

1.ie-css.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
- Added partial support for 'box-shadow' style
- Checks for VML support before doing anything
- Updates VML element size and position via timer and also via window resize event
- lots of other small things
Published date : 2010/03/14
http://fetchak.com/ie-css3

Thanks to TheBrightLines.com (http://www.thebrightlines.com/2009/12/03/using-ies-filter-in-a-cross-browser-way) for enlightening me about the DropShadow filter

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

timer_length = 200; // Milliseconds
border_opacity = false; // Use opacity on borders of rounded-corner elements? Note: This causes antialiasing issues


// supportsVml() borrowed from http://stackoverflow.com/questions/654112/how-do-you-detect-support-for-vml-or-svg-in-a-browser
function supportsVml() {
    if (typeof supportsVml.supported == "undefined") {
        var a = document.body.appendChild(document.createElement('div'));
        a.innerHTML = '<v:shape id="vml_flag1" adj="1" />';
        var b = a.firstChild;
        b.style.behavior = "url(#default#VML)";
        supportsVml.supported = b ? typeof b.adj == "object": true;
        a.parentNode.removeChild(a);
    }
    return supportsVml.supported
}


// 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 createBoxShadow(element, vml_parent) {
    var style = element.currentStyle['iecss3-box-shadow'] || element.currentStyle['-moz-box-shadow'] || element.currentStyle['-webkit-box-shadow'] || element.currentStyle['box-shadow'] || '';
    var match = style.match(/^(\d+)px (\d+)px (\d+)px/);
    if (!match) { return(false); }


    var shadow = document.createElement('v:roundrect');
    shadow.userAttrs = {
        'x': parseInt(RegExp.$1 || 0),
        'y': parseInt(RegExp.$2 || 0),
        'radius': parseInt(RegExp.$3 || 0) / 2
    };
    shadow.position_offset = {
        'y': (0 - vml_parent.pos_ieCSS3.y - shadow.userAttrs.radius + shadow.userAttrs.y),
        'x': (0 - vml_parent.pos_ieCSS3.x - shadow.userAttrs.radius + shadow.userAttrs.x)
    };
    shadow.size_offset = {
        'width': 0,
        'height': 0
    };
    shadow.arcsize = element.arcSize +'px';
    shadow.style.display = 'block';
    shadow.style.position = 'absolute';
    shadow.style.top = (element.pos_ieCSS3.y + shadow.position_offset.y) +'px';
    shadow.style.left = (element.pos_ieCSS3.x + shadow.position_offset.x) +'px';
    shadow.style.width = element.offsetWidth +'px';
    shadow.style.height = element.offsetHeight +'px';
    shadow.style.antialias = true;
    shadow.className = 'vml_box_shadow';
    shadow.style.zIndex = element.zIndex - 1;
    shadow.style.filter = 'progid:DXImageTransform.Microsoft.Blur(pixelRadius='+ shadow.userAttrs.radius +',makeShadow=true,shadowOpacity='+ element.opacity +')';

    element.parentNode.appendChild(shadow);
    //element.parentNode.insertBefore(shadow, element.element);

    // For window resizing
    element.vml.push(shadow);

    return(true);
}

function createBorderRect(element, vml_parent) {
    if (isNaN(element.borderRadius)) { return(false); }

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

    var rect = document.createElement('v:roundrect');
    rect.position_offset = {
        'y': (0.5 * element.strokeWeight) - vml_parent.pos_ieCSS3.y,
        'x': (0.5 * element.strokeWeight) - vml_parent.pos_ieCSS3.x
    };
    rect.size_offset = {
        'width': 0 - element.strokeWeight,
        'height': 0 - element.strokeWeight
    };
    rect.arcsize = element.arcSize +'px';
    rect.strokeColor = element.strokeColor;
    rect.strokeWeight = element.strokeWeight +'px';
    rect.stroked = element.stroked;
    rect.className = 'vml_border_radius';
    rect.style.display = 'block';
    rect.style.position = 'absolute';
    rect.style.top = (element.pos_ieCSS3.y + rect.position_offset.y) +'px';
    rect.style.left = (element.pos_ieCSS3.x + rect.position_offset.x) +'px';
    rect.style.width = (element.offsetWidth + rect.size_offset.width) +'px';
    rect.style.height = (element.offsetHeight + rect.size_offset.height) +'px';
    rect.style.antialias = true;
    rect.style.zIndex = element.zIndex - 1;

    if (border_opacity && (element.opacity < 1)) {
        rect.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(Opacity='+ parseFloat(element.opacity * 100) +')';
    }

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

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

    rect.appendChild(fill);
    element.parentNode.appendChild(rect);
    //element.parentNode.insertBefore(rect, element.element);

    // For window resizing
    element.vml.push(rect);

    return(true);
}

function createTextShadow(element, vml_parent) {
    if (!element.textShadow) { return(false); }

    var match = element.textShadow.match(/^(\d+)px (\d+)px (\d+)px (#?\w+)/);
    if (!match) { return(false); }


    //var shadow = document.createElement('span');
    var shadow = element.cloneNode(true);
    var radius = parseInt(RegExp.$3 || 0);
    shadow.userAttrs = {
        'x': parseInt(RegExp.$1 || 0) - (radius),
        'y': parseInt(RegExp.$2 || 0) - (radius),
        'radius': radius / 2,
        'color': (RegExp.$4 || '#000')
    };
    shadow.position_offset = {
        'y': (0 - vml_parent.pos_ieCSS3.y + shadow.userAttrs.y),
        'x': (0 - vml_parent.pos_ieCSS3.x + shadow.userAttrs.x)
    };
    shadow.size_offset = {
        'width': 0,
        'height': 0
    };
    shadow.style.color = shadow.userAttrs.color;
    shadow.style.position = 'absolute';
    shadow.style.top = (element.pos_ieCSS3.y + shadow.position_offset.y) +'px';
    shadow.style.left = (element.pos_ieCSS3.x + shadow.position_offset.x) +'px';
    shadow.style.antialias = true;
    shadow.style.behavior = null;
    shadow.className = 'ieCSS3_text_shadow';
    shadow.innerHTML = element.innerHTML;
    // For some reason it only looks right with opacity at 75%
    shadow.style.filter = '\
        progid:DXImageTransform.Microsoft.Alpha(Opacity=75)\
        progid:DXImageTransform.Microsoft.Blur(pixelRadius='+ shadow.userAttrs.radius +',makeShadow=false,shadowOpacity=100)\
    ';

    var clone = element.cloneNode(true);
    clone.position_offset = {
        'y': (0 - vml_parent.pos_ieCSS3.y),
        'x': (0 - vml_parent.pos_ieCSS3.x)
    };
    clone.size_offset = {
        'width': 0,
        'height': 0
    };
    clone.style.behavior = null;
    clone.style.position = 'absolute';
    clone.style.top = (element.pos_ieCSS3.y + clone.position_offset.y) +'px';
    clone.style.left = (element.pos_ieCSS3.x + clone.position_offset.x) +'px';
    clone.className = 'ieCSS3_text_shadow';


    element.parentNode.appendChild(shadow);
    element.parentNode.appendChild(clone);

    element.style.visibility = 'hidden';

    // For window resizing
    element.vml.push(clone);
    element.vml.push(shadow);

    return(true);
}

function ondocumentready(classID) {
    if (!supportsVml()) { return(false); }

  if (this.className.match(classID)) { return(false); }
    this.className = this.className.concat(' ', classID);

    // Add a namespace for VML (IE8 requires it)
    if (!document.namespaces.v) { document.namespaces.add("v", "urn:schemas-microsoft-com:vml"); }

    // Check to see if we've run once before on this page
    if (typeof(window.ieCSS3) == 'undefined') {
        // Create global ieCSS3 object
        window.ieCSS3 = {
            'vmlified_elements': new Array(),
            'update_timer': setInterval(updatePositionAndSize, timer_length)
        };

        if (typeof(window.onresize) == 'function') { window.ieCSS3.previous_onresize = window.onresize; }

        // Attach window resize event
        window.onresize = updatePositionAndSize;
    }


    // These attrs are for the script and have no meaning to the browser:
    this.borderRadius = parseInt(this.currentStyle['iecss3-border-radius'] ||
                                 this.currentStyle['-moz-border-radius'] ||
                                 this.currentStyle['-webkit-border-radius'] ||
                                 this.currentStyle['border-radius'] ||
                                 this.currentStyle['-khtml-border-radius']);
    this.arcSize = Math.min(this.borderRadius / Math.min(this.offsetWidth, this.offsetHeight), 1);
    this.fillColor = this.currentStyle.backgroundColor;
    this.fillSrc = this.currentStyle.backgroundImage.replace(/^url\("(.+)"\)$/, '$1');
    this.strokeColor = this.currentStyle.borderColor;
    this.strokeWeight = parseInt(this.currentStyle.borderWidth);
    this.stroked = 'true';
    if (isNaN(this.strokeWeight) || (this.strokeWeight == 0)) {
        this.strokeWeight = 0;
        this.strokeColor = fillColor;
        this.stroked = 'false';
    }
    this.opacity = parseFloat(this.currentStyle.opacity || 1);
    this.textShadow = this.currentStyle['text-shadow'];

    this.element.vml = new Array();
    this.zIndex = parseInt(this.currentStyle.zIndex);
    if (isNaN(this.zIndex)) { this.zIndex = 0; }

    // Find which element provides position:relative for the target element (default to BODY)
    vml_parent = this;
    var limit = 100, i = 0;
    do {
        vml_parent = vml_parent.parentElement;
        i++;
        if (i >= limit) { return(false); }
    } while ((typeof(vml_parent) != 'undefined') && (vml_parent.currentStyle.position != 'relative') && (vml_parent.tagName != 'BODY'));

    vml_parent.pos_ieCSS3 = findPos(vml_parent);
    this.pos_ieCSS3 = findPos(this);

    var rv1 = createBoxShadow(this, vml_parent);
    var rv2 = createBorderRect(this, vml_parent);
    var rv3 = createTextShadow(this, vml_parent);
    if (rv1 || rv2 || rv3) { window.ieCSS3.vmlified_elements.push(this.element); }

    if (typeof(vml_parent.document.ieCSS3_stylesheet) == 'undefined') {
        vml_parent.document.ieCSS3_stylesheet = vml_parent.document.createStyleSheet();
        vml_parent.document.ieCSS3_stylesheet.addRule("v\\:roundrect", "behavior: url(#default#VML)");
        vml_parent.document.ieCSS3_stylesheet.addRule("v\\:fill", "behavior: url(#default#VML)");
        // Compatibility with IE7.js
        vml_parent.document.ieCSS3_stylesheet.ie7 = true;
    }
}

function updatePositionAndSize() {
    if (typeof(window.ieCSS3.vmlified_elements) != 'object') { return(false); }

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

        if (typeof(el.vml) != 'object') { continue; }

        for (var z in el.vml) {
            //var parent_pos = findPos(el.vml[z].parentNode);
            var new_pos = findPos(el);
            new_pos.x = (new_pos.x + el.vml[z].position_offset.x) + 'px';
            new_pos.y = (new_pos.y + el.vml[z].position_offset.y) + 'px';
            if (el.vml[z].style.left != new_pos.x) { el.vml[z].style.left = new_pos.x; }
            if (el.vml[z].style.top != new_pos.y) { el.vml[z].style.top = new_pos.y; }

            var new_size = {
                'width': parseInt(el.offsetWidth + el.vml[z].size_offset.width),
                'height': parseInt(el.offsetHeight + el.vml[z].size_offset.height)
            }
            if (el.vml[z].offsetWidth != new_size.width) { el.vml[z].style.width = new_size.width +'px'; }
            if (el.vml[z].offsetHeight != new_size.height) { el.vml[z].style.height = new_size.height +'px'; }
        }
    }

    if (event && (event.type == 'resize') && typeof(window.ieCSS3.previous_onresize) == 'function') { window.ieCSS3.previous_onresize(); }
}
</script>

 

2.调用ie-css3.htc脚本

.box{
    border:1px solid #ccc;
    -moz-border-radius: 15px; /* Firefox */
    -webkit-border-radius: 15px; /* Safari 和 Chrome */
    border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
    width:150px;height:150px;
    behavior:url(ie-css3.htc);
}

 

 

问题三：min-width/min-height/max-width/max-height

解决方案：

.box{
    border:1px solid #ccc;
    max-width:100px;                
 　 _width:expression((document.documentElement.clientWidth||document.body.clientWidth)<100?"100px":"");
　　overflow:hidden;
}

*注：_width:expression((document.documentElement.clientWidth||document.body.clientWidth)<100?"100px":""); 中的三个数字必须相同

 

 

问题四：不同浏览器的标签默认的内边距和外边距不同

解决方案：

*{margin:0;padding:0}

 

 

 

问题五：float情况下在ie6中margin会加倍

解决方案：

.box{
    float:left;
    margin:5px;
    display:inline;
}

 

 

 

问题六：ie下<img />标签的图片下有间隙（原因在于，图片是行内替换元素）

解决方案：

1.设置display:block

2.vertical-align:top/bottom/middle/text-bottom

 

  

ie 常用 hack:

1.注释法：

<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]-->

 

2.属性前缀法

在标准模式中：

  • “-″减号是IE6专有的hack
  • “+”加号IE6/7生效
  • “\9″ IE6/IE7/IE8/IE9/IE10都生效
  • “\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
  • “\9\0″ 只对IE9/IE10生效，是IE9/10的hack
  • :root #test { background-color:purple\9; } /*ie9*/
.box{
    background-color:#f1ee18;/*所有识别*/
    background-color:#00deff\9;/*IE6、7、8、9、10识别，但是IE11不支持*/
    background-color:#00deff\0;/*IE8、9、10、11识别,据说还有opera*/
    background-color:#00deff\9\0;/*IE8、9、10识别*/
    +background-color:#a200ff;/*IE6、7识别*/
    *background-color:#a200ff;/*IE6、7识别*/
    _background-color:#1e0bd1;/*IE6识别*/
}

 

3.选择器前缀法：

*html *前缀只对IE6生效
 
*+html *+前缀只对IE7生效
 
@media screen\9{...}只对IE6/7生效
 
@media \0screen {body { background: red; }}只对IE8有效
 
@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效
 
@media screen\0 {body { background: green; }} 只对IE8/9/10有效
 
@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
 
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效

 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：CSS3 选择器浏览器兼容性汇总 IE8

下一篇：我的启蒙--HTML5 第一章 语义化标签

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签