浏览器兼容性问题

最近开发了一个jsp页面，一直 用firefox调试，现在调试ie的兼容性 ，先简单总结下：

苦恼的区别：

1.image-repeat:

在火狐里比较正常，可是在ie中一直repeat.背景是一个关闭的x号， div设置的backgourn-image:url("xxxxx")

结果在ie中却不行，最后找到原因是ie中要显式的写上image-repeat:：norepeat这属性，

还有好多的差异，明天 去了 公司继续补充。。。

总结出一条规律：

其实要想尽量避免兼容性问题，最好多用div，都做成块，这样就很好调整了。

2.ie中select 设置高度失效

很多人通过设置font-size 来使得他变高，这样确实可以，可是在我的项目中ui比较苛刻，所以就只能重新想办法了

所以，自己用过了div来调节样式来实现。

 3.这次开发遇到css样式的兼容性，再同一个css中调试又担心拆东墙补西墙，所有索性就多写了几个css,通过判断浏览器来加载css文件，代码如下

<script type="text/javascript">

var OsObject = "";

if(navigator.userAgent.indexOf("MSIE")>0) {
OsObject =  "MSIE";
document.write('<link type="text/css" rel="stylesheet" href="<c:url value = "/manager/jsp/tag/tagBackground_files/axurerp_pagespecificstyles_ie.css"/>">');
}

if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
OsObject =  "Firefox";

document.write('<link type="text/css" rel="stylesheet" href="<c:url value = "/manager/jsp/tag/tagBackground_files/axurerp_pagespecificstyles.css"/>">');
}
if(navigator.userAgent.indexOf("Safari")>0){
OsObject =  "Safari";
document.write('<link type="text/css" rel="stylesheet" href="<c:url value = "/manager/jsp/tag/tagBackground_files/axurerp_pagespecificstyles_Safari.css"/>">');
}

</script>

4.透明度设置：

firefox:opacity:0.3; 

.beforeTable{
background-color: #94A7A7;
    height: 1000px;
    position: absolute;
    width: 1000px;
    z-index: 1000;
    opacity:0.3; 
/* filter:alpha(opacity:0.3); */
opacity: 0.3; 
}

ie:filter:alpha(opacity=40);  

.beforeTable{
background-color: #94A7A7;
    height: 1000px;
    position: absolute;
    width: 1000px;
    z-index: 1000;
    filter:alpha(opacity=40);  
/* filter:alpha(opacity:0.3); */
opacity: 0.3; 
}

=======================今天调试遇到报错：CSS 因 Mime 类型不匹配而被忽略=========================

<!-- 以下是无奈之举（直接把样式写在文件里）：ie11可以加载css文件，可是就是渲染不了 ，提示：CSS 因 Mime 类型不匹配而被忽略 -->

<!-- <link href="./css/public.css" rel="stylesheet" type="text/css" /> -->
<!-- <link href="./css/global.css" rel="stylesheet" type="text/css" /> -->
<style type="text/css">
	body {background:#f5f5f5; font-size:14px; min-height:650px;}
	.header {height:91px; border-bottom:1px solid #e6e6e6; padding-top:27px}
	.header .logo {background:url(../images/logo.jpg); width:112px; height:64px; margin:0 auto; display:block;}
	.con {padding:93px 0 87px 0; min-height:420px;}
	.con .type {font-family:Arial}
	.con .step1 {background:url(../images/step1bg.jpg); width:420px; height:330px; margin:0 auto; color:#878d91; text-align:center; position: relative;}
	.con .step1 a {color:#0ed5a8; font-weight:bold; text-decoration:none}
	.con .step1 .fieldset {position:relative}
	.con .step1 .fieldset .progressWrapper {position:absolute; top:60px; left:0; width:100%; z-index:99}
	.con .step1 .text {position:absolute; top:290px; left:0; z-index:1; width:420px; text-align:center}
	.con .step1 .input1 {position:absolute; top:280px; left:210px; z-index:2; width:32px; height:40px; filter:alpha(opacity=0); opacity:0;}
	.con .step1 .cbox {position:absolute; top:0; left:0; z-index:9; width:420px; height:330px; background:url(../images/cboxbg.jpg);}
	.con .step2 {background:url(../images/step2bg.jpg); width:420px; height:330px; margin:0 auto; text-align:center; position:relative}
	.con .step2 .loading {width:352px; line-height:50px; height:50px; background:#d6d6d6; position:absolute; bottom:0; left:4px; font-family:Arial; font-size:16px; color:#fff}
	.con .step2 .loading .percentage {background:#23dab2; position:absolute; left:0; top:0; height:50px; z-index:2}
	.con .step2 .loading .digital {position:relative; z-index:3}
	.con .step2 .cancel {position:absolute; bottom:0; right:4px; width:60px; height:50px; background:url(../images/cancel.jpg)}
	.con .step2 .cancel a {display:block; height:50px}
	.con .step3 {background:url(../images/step3bg.jpg); width:420px; height:330px; margin:0 auto; text-align:center; position:relative}
	.con .tip {text-align:center; color:#b1b6b9; margin-top:35px; line-height:24px;}
	.footer {font-family:Arial; text-align:center; color:#9e9e9e; line-height:77px; border-top:1px solid #e6e6e6; font-size:12px;}
	
	
	body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
	table{border-collapse:collapse;border-spacing:0}
	fieldset,img{border:0}
	li{list-style-type:none}
	h1,h2,h3,h4,h5,h6{font-weight:normal}
	input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}
	input,textarea,select{font-size:100%}
	select,input,button,textarea{font:99% arial,helvetica,clean,sans-serif}
	table{font-size:inherit;font:100%}
	a{text-decoration:none}
	a:hover,a:focus{text-decoration:underline}
	strong{font-weight:bold}
	.l{float:left}
	.c{clear:both; font-size:0; height:0; overflow:hidden;}
	.b{font-weight:bold}.r{float:right}
</style>

解决办法应该是这样：

先check了link引用的方式，发现缺少type=text/css，加上后报错依旧。

然后根据http://blog.163.com/lihuangsuo@126/blog/static/3686389120112174544383/网上的这些文章，把mime的type类型手动加到服务器应用的web.xml下，依旧无效。

check了tomcat和jetty的conf下默认web.xml里的mime的类型是否正确，发现配置正常，但是不管是什么服务器都报错。

 

在chrome中发现warning

发现不管是css还是js的content-type都变成了text/plain

最后检查应用的response部分发现输出流前缺少设置content-type

String uri = request.getRequestURI();
        if(uri.matches(".+(css|js|png|ico|swf)$")) {
            String assetsRoot = getVelocityProperty(AppLoader.APP_LOADER_ASSETS_PATH, "/");
            byte[] bytes = FileUtils.readFileToByteArray(new File(assetsRoot + uri));
            ServletOutputStream outputStream = response.getOutputStream();
            IOUtils.write(bytes, outputStream);
            return;
        }

于是手动设置content-type

String uri = request.getRequestURI();
        if(uri.matches(".+(css|js|png|ico|swf)$")) {
            String assetsRoot = getVelocityProperty(AppLoader.APP_LOADER_ASSETS_PATH, "/");
            byte[] bytes = FileUtils.readFileToByteArray(new File(assetsRoot + uri));
            response.setContentType(MimeHandler.getContentType(FilenameUtils.getExtension(uri)));
            ServletOutputStream outputStream = response.getOutputStream();
            IOUtils.write(bytes, outputStream);
            return;
        }

问题解决。

可以由于这个页面的调用放在手机那里，我也不想让别人动，就这么自己解决了！！！