最近开发了一个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;
}
问题解决。
可以由于这个页面的调用放在手机那里,我也不想让别人动,就这么自己解决了!!!