## rgba 颜色格式
* IE8 不支持 `rgba(0, 0, 0, .5)` 这种颜色格式。
* 解决方案:可以利用一张半透明的 png 图片来兼容 IE8。
## flexbox
* 根据 [caniuse](https://coderfe.gitbooks.io/notes/content/FrontEnd/caniuse.com) 给出的数据,IE8 是不支持 `flex` 布局属性的, 甚至 IE11 只支持一部分。
* 解决方案:利用 `display: inline-block` / `display: table` / `display: inline` 来实现部分兼容。
* [Almost complete guide to flexbox (without flexbox)](https://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox),介绍了一些不用 `felx` 属性来完成 `flexbox` 布局的技术,很有参考价值,推荐。
* [Flexbox Patterns](http://www.flexboxpatterns.com/site-header),一些利用 `flex` 实现常用的布局的例子,推荐参考。
## HTML5
* 非常遗憾,HTML5 新增的标签在 IE8 里是不受支持滴,例如:`section` / `main` / `header` / `footer`等。
* 解决方案:[html5shiv](https://github.com/aFarkas/html5shiv),这个脚本可以实现兼容 IE8 。
## media query
* 非常非常遗憾,IE8 也不支持 `media query` 。
* 解决方案:[Respond.js](https://github.com/scottjehl/Respond)
## CSS3 新特性
* IE8 支持的 CSS3 新特性仅有 20% ,具体可以查看 [caniuse](http://caniuse.com/#search=css3) 。
* 解决方案:[css3pie](https://github.com/lojjic/PIE),目前 css3pie 可以支持的功能有:
* border-radius
* box-shadow
* border-image
* multiple background images
* linear-gradient as background image
## innerHTML
* IE8 不支持 innerHTML ,如果在 IE8 中运行类似 `el.innerHTML = '<div>' + content + '</div>'`的脚本时会报错如下:
```
Unknown runtime error
```
* 可以利用这两种方法 `document.createElement()` & `appendChild()` ,动态创建并插入到目标元素。
ie9上box-shadow不能正常显示,需要加border-collapse: separate;
ie8上显示box-shandow的方法:需要加 behavior: url(PIE/PIE.htc),千万不能加"../PIE.htc";
border-collapse: separate;
background-color: #fff;
box-shadow: 1px 5px 10px 0px #eee ;
-moz-box-shadow: 1px 5px 10px 0px #eee ;
-webkit-box-shadow: 1px 5px 10px 0px #eee ;
behavior: url(PIE/PIE.htc);
image.png
ie上设置字体为加粗后,出现这种存在乱码的情况,解决方式 body{font-famliy:""},文字即可正常显示
兼容placeholder写法
// 兼容placeholder写法
function showPlaceholder(fontWeight) {
fontWeight=fontWeight?fontWeight:'normal';
$('input[placeholder],textarea[placeholder]').each(function () {
var that = $(this),
text = that.attr('placeholder');
if (that.val() === ""|| that.val() ===text) {
that.val(text).css({'color': '#999',"fontWeight":'normal',"fontSize":"14px"});
}else{
console.log(123)
that.css({'color':'#333',"fontWeight":fontWeight,"fontSize":fontWeight=='normal'?"14px":"18px"});
}
that.focus(function () {
if (that.val() == text) {
that.val("")
that.attr('placeholder',"");
that.css({'color':'#333',"fontWeight":fontWeight,"fontSize":fontWeight=='normal'?"14px":"18px"});
}
}).blur(function () {
if (that.val() === "") {
that.val(text).css({'color': '#999',"fontWeight":'normal',"fontSize":"14px"});
}else{
that.css({'color':'#333',"fontWeight":fontWeight,"fontSize":fontWeight=='normal'?"14px":"18px"});
}
}).closest('form').submit(function () {
if (that.val() === text) {
that.val('');
}
});
});
}
select多选
css
.cb-Checkbox{
display: inline-block;
width:340px;
position: relative;
cursor: pointer;
}
.cbInput-box{
padding-left: 10px;
padding-right: 30px;
width: 100%;
height: 50px;
line-height: 50px;
border-radius: 5px;
background-color: #eee;
border: 0px solid #eee;
}
.cbOption-box{
z-index: -1;
/* opacity: 0;
filter:Alpha(opacity=0); */
display: none;
position:absolute;
text-align: left;
border: 1px solid #999999 ;
width: 100%;
background-color: #ffffff;
/* padding-right: 30px; */
border: 1px solid #d2d2d2;
overflow-y: auto;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 2px 4px rgba(0,0,0,.12);
box-sizing: border-box;
}
.cbOption{
cursor:pointer;
line-height: 36px;
padding-left: 10px;
}
.active{
background-color: #5FB878;
color: #fff;
}
js
// 调用函数
function cbInit(cbValue,cbOptions){
var cbValue = cbValue
var cbOptions = cbOptions
cbInputInit(cbValue)
cbOptionsInit(cbOptions,cbValue)
}
// 输入框初始化
function cbInputInit(cbValue){
var inputtext = ''
$(cbValue).each(function(index,item){
if(index < cbValue.length-1){
inputtext += item.name+' , '
}else{
inputtext += item.name
}
})
$('.cbInput-box').val(inputtext)
}
// 选择项显示隐藏
$(".cbInput-box").on("click", function(){
if($('.cbOption-box').css("display")=="none"){
$('.cbOption-box').css("display","block")
$('.cbOption-box').css("z-index",999)
}else{
$('.cbOption-box').css("display","none")
$('.cbOption-box').css("z-index",999)
}
})
// 光标移开输入框和选择框隐藏
var ifinInputbox = false
var ifinOptionbox = false
$(".cbInput-box").mouseover(function(){
ifinInputbox = true
}).mouseout(function(){
ifinInputbox = false
});
$(".cbOption-box").mouseover(function(){
ifinOptionbox = true
}).mouseout(function(){
ifinOptionbox = false
});
// 下面两个blur事件在谷歌浏览器不支持,ie8支持,不影响使用。(有更好的解决方案希望留言讨论)
$(".cbInput-box").on("blur", function(){
if(!ifinOptionbox){
$('.cbOption-box').css("display","none")
$('.cbOption-box').css("z-index",999)
}
})
$(".cbOption-box").on("blur", function(){
if(!ifinInputbox){
$('.cbOption-box').css("dispaly","none")
$('.cbOption-box').css("z-index",998)
}
})
// 选择项初始化
function cbOptionsInit(cbOptions,cbValue){
$(".cbOption-box").empty();
for(var i = 0;i<cbOptions.length;i++){
var ifactive = false
$(cbValue).each(function(index,item){
if(cbOptions[i].id == item.id){
ifactive = true
}
})
if(ifactive){
$('.cbOption-box').append("<p id='999' class='cbOption active' dataid="+ cbOptions[i].id +">"+cbOptions[i].name+"</p>")
}else{
$('.cbOption-box').append("<p class='cbOption' dataid="+ cbOptions[i].id +">"+cbOptions[i].name+"</p>")
}
}
// 选择事件
$(".cbOption").on("click", function(){
if($(this).attr("class").indexOf('active')== -1){
$(this).addClass("active");
cbChange(true,$(this).attr('dataid'))
}else{
$(this).removeClass("active");
cbChange(false,$(this).attr('dataid'))
}
});
// 选择项变化时输入框的变化
function cbChange(ifadd,id){
if(ifadd){
$(cbOptions).each(function(index2,item2){
if(id == item2.id){
cbValue.push(item2)
cbInputInit(cbValue)
return
}
})
}else{
$(cbValue).each(function(index,item){
if(id == item.id){
cbValue.splice(index,1)
cbInputInit(cbValue)
return
}
})
}
}
}
html
<div class="cb-Checkbox">
<input class="cbInput-box" name="products" value="" readonly="readonly" placeholder="请选择要激活的产品"/>
<div class="cbOption-box"></div>
</div>
ie8下使用ajax失效问题解决
1.ajax传参类型可为 data1 = "name="+name+"&tel="+tel;或 data:{"id":id}
2.IE浏览器发送请求时,会默认获取前一次获取的数据,添加 cache:false
3.IE中接收数据类型为dataType:"json"
4.IE浏览器不支持CORS,在发送ajax请求之前添加jQuery.support.cors=true;即可
function request(url,method,callback){
jQuery.support.cors=true;
var requestUrl="[XXXX]";
$.ajax({
url:requestUrl+url,
type:method,
dataType:"json",
contentType: "text/plain; charset=UTF-8",
timeout:600000,
cache:false,
success: function(res){ callback(res);
}
});
}
网友评论