浏览器兼容性 问题收集

2013年8月28日11:53:38

设置table  的边框为1像素

    #userdi
    {
        border-collapse:collapse;border:none;
        }
    #userdi td
    {
        text-align: center;
        vertical-align: middle;
        border:1px dashed #D7D7D7;
        padding:5px 5px;
    }

 

 

 

 

2013年8月27日10:20:04

function getExplorer() {
var explorer = window.navigator.userAgent ;
//ie 
if (explorer.indexOf("MSIE") >= 0) {
alert("ie");
}
//firefox 
else if (explorer.indexOf("Firefox") >= 0) {
alert("Firefox");
}
//Chrome
else if(explorer.indexOf("Chrome") >= 0){
alert("Chrome");
}
//Opera
else if(explorer.indexOf("Opera") >= 0){
alert("Opera");
}
//Safari
else if(explorer.indexOf("Safari") >= 0){
alert("Safari");
}
}

 

 

 

 

 

 

1. button按钮文字居中

.button {
	border: #0099FF 1px solid;
	height: 22px;
	cursor: pointer;
	color: #0066CC;
	background-color: #ffffff;	
        line-height:18px;/*针对IE*/
        width:68px;
}
.button::-moz-focus-inner{ border: 0;padding: 0;}/*针对Firefox*/

.button:hover {
	background-color: #E9F5FE;
}
.button:active {
	background-color: #0066CC;
	color: #ffffff;
}

2. 其他文章：IE6、IE7、IE8的CSS、JS兼容   阅读

 

3. IE6 FrameSet

解决办法：<body class=...>的背景去掉就好了
                   如：/*background:url(../../images/main/article.png) right top repeat-y;
                           padding-right:4px;*/


终于解决这个垃圾问题了 



二、使用框架（无论是frameset、frame、iframe）嵌套网页的时候，如果子网页的高度超过了预先设定的高度，会出现滚动条，也就是尺寸溢出，一般来说如果高度超了就出现垂直滚动条，宽度超了就出现水平滚动条，但是在IE6中，只要尺寸大于等于预定高度，就会两个滚动条一起出现，这好象是一个bug。

解决方法：
在子网页设置css如下：

html {
overflow-y:auto!important;
*overflow-y:scroll;
}

这段最重要的一点是设置overflow-y为scroll，这样强制出现垂直滚动条的话，水平滚动条就不会显示出来了，但如果宽度超出过多，水平滚动条还是会超出，这时可以考虑设置:overflow-x:hidden;，但相应的，这样用户就无法滚动子页面了。

之所以要加overflow-y:auto!important;，是因为IE7中已没有这个bug，并且firefox也能认到overflow-y这个据说是IE的私有属性……，所以我们还要把overflow设回来。

 

上面这个方法还可以有改进的地方
既然只有IE6有这个BUG那就只针对IE6写就行了
html {_overflow-y:scroll;}
_下划线是IE6专有的 这样就又省了一行代码 又提高了效率

 

 

 

posted @ 2013-06-26 14:35  AYUI框架  阅读(398)  评论(0)  编辑  收藏  举报