IE8常见问题及解决方法_word-break:break-all; ie8-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45948938/article/details/113352304

一、CSS方面

1.伪类选择器first-child兼容IE8，其余同类型选择器不兼容

该方法表示找到该元素的父元素下的第一个子元素，匹配

的父元素的第一个

元素

p:first-child
{ 
    background-color:skyblue;
}

2.如果元素的宽度是由min-width决定的，则浏览器会忽略`box-sizing: border-box`

3.不兼容动态计算长度值函数calc()

只能使用js计算

4.不兼容background-size

可以使用前景图或者等比例大小的背景图

5.不兼容text-overflow

首先平时用的时候要配合使用overflow: hidden; white-space: nowrap;

这两个属性让溢出隐藏和不换行,然后IE8用的时候记得不要加

word-berak:break-all; word-wrap:break-word;

这样断开了,在IE8里面是不会变成省略号的(但是在IE6/7/FF/Chrome都没有问题),其实都单行省略了,本来也没有必要断词

所以一般标准组合就是:

overflow: hidden;

white-space: nowrap;

-o-text-overflow: ellipsis; /* for Opera */

text-overflow: ellipsis; /* for IE */

基本通杀所有浏览器了

最后像这类默认非块的元素,要加上display:block;才有效果，还有别忘了width或者max-width。

我们是直接根据文字长度进行判断，超过多长就截取前多少字进行展示其余…

render: function (v, item) {
       if (item.name.length > 6) {
           return '<p class="nm-tooltip" label="' + item.name + '">'
                            + v + '(' + item.name.slice(0, 6) + '...)' + '</p>'
        } else {
            return v + '(' + item.name + ')' || '--'
         }
}

6.不兼容border-radius

只能使用图片代替了（整体背景图或者四个弧角的背景图）

7.不兼容box-shadow

使用：

/*Internet Explorer*/
background:#fff;
/*Internet Explorer 8 */

-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC,direction=0,strength=6) 
progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC,direction=90,strength=6) 
progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC,direction=180,strength=6) 
progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC,direction=270,strength=6)";

shadow滤镜必须配合background属性一起使用，否则该滤镜失效

在IE8中，-ms-filter是filter的别名，两者区别是-ms-filter是属相值必须被单引号包围，而filter中则不是必须。在IE8之前的版本中，filter的属性值必须不被单引号或双引号包围。

shadow滤镜的基本语法：

filter:Shadow(Color=color,Direction=direction,strength=strength)

color代表投影的底色，该数值是英文字母来代替的，例如投影底色是蓝色的话，就应该设置color=blue。

direction参数是用来设置投影方向的，如果该数值是零的话，就代表垂直投影，此外该数值45度为单位，他的默认值是向左的270度。

strength设置或检索一对象为基准的在运动方向上的向外扩散距离。

box-shadow:||

box-shadoe: x轴位移 y轴位移阴影大小阴影颜色

在低于Firefox4、Chrome10的浏览器中实现阴影效果需要添加：

-moz-box-shadow: 0px 0px 6px #CCC;
-webkit-box-shadow: 0px 0px6px #CCC;

8.不兼容placeholder

使用js插件：jquery.placeholder.js

https://github.com/mathiasbynens/jquery-placeholder

或者自己在input框下面再写一个div用于文字提示

<div class="nm-field-content">
    <input class="nm-input" type="text" id="no_client_name"
           placeholder="可查询客户姓名/联系方式">
        <div class="nm-field-ie8-placeholder">可查询客户姓名/联系方式</div>
</div>

.nm-field-ie8-placeholder {
	display: none;
	display: block\0; 
	padding-top: 4px;
	color: $light-4;
	font-size: 12px;
}

9.不兼容rgba()函数和opacity

rgba() 函数使用红®、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色。

RGBA 即红色、绿色、蓝色、透明度（英语：Red, Green, Blue、Alpha）。

**红色（R）**0 到 255 间的整数，代表颜色中的红色成分。。
**绿色（G）**0 到 255 间的整数，代表颜色中的绿色成分。
**蓝色（B）**0 到 255 间的整数，代表颜色中的蓝色成分。
**透明度（A）**取值 0~1 之间，代表透明度。

opacity是元素透明度值是0（完全透明）-1（完全不透明）

注：IE8和早期版本支持另一种过滤器属性。像：filter:Alpha(opacity=50)

二、js及其他方面

1.不支持forEach

用for…in遍历"数组": 循环变量x是数组的下标

var arr=[22,33,44,55,66];
	for(x in arr){
		//Java中的x是数组元素，而js中的x是数组下标
		//document.write(x+"&nbsp;"); //下标 : 0 1 2 3 4
		document.write(arr[x]+"&nbsp;"); //元素
	}

用for…in遍历"js对象": 循环变量x是json的成员—属性与方法名

function Person(name, age){
		this.name = name;
		this.age = age;
		this.toString = function(){
			return this.name + "," + this.age;
		}
	}

var p = new Person("Jack",22);
	for(x in p){
		//document.write(x+"&nbsp;"); //属性与方法名: name age toString
		//document.write(p.x+"&nbsp;"); 
		document.write(p[x]+"&nbsp;"); //属性值与方法体
	}

或者直接使用for循环

2.不支持es6箭头函数

直接使用function

return function () {
    var that = this
    // () => {
     // 不改变this指向，可以直接使用this
   	// }
    function a() {
	 // 取外层函数上的属性即可使用that
	}
}

参考文档链接：

1.https://www.w3school.com.cn/

2.https://www.runoob.com/

3.https://www.cnblogs.com/toggle/p/10184181.html