IE 兼容问题笔记 IE 兼容问题笔记
css部分
-
white-space:nowrap;不生效【解决办法:添加一行样式(word-break:keep-all;)】
white-space:nowrap; word-break:keep-all;
-
max-fit-content;不生效【解决办法:添加一行样式(display: inline-block;)或者(display: inline-flex;)】
max--webkit-fit-content; max--moz-fit-content; max-fit-content; display:inline-block; /* display: inline-flex; */
-
换行
p { white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; word-break: break-all }
word-wrap:break-word 对长串英文不起作用,其实这是非常错误的,word-wrap:break-word照样能把一个长串英文或数字拆成多行。事实上,word-wrap:break-word与word-break:break-all共同点是都能把长单词强行断句;
不同点是word-wrap:break-word会首先起一个新行来放置长单词,新的行还是放不下这个长单词则会对长单词进行强制断句;而word-break:break-all则不会把长单词放在一个新行里,当这一行放不下的时候就直接强制断句了。 -
透明度
.transparent_class { -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50); filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity:0.5; opacity:0.5; }
-
禁止选中
.none-select{ cursor: not-allowed; pointer-events: none; }
表单部分
- ie下input框设置了readonly属性,鼠标还是可以点击光标聚焦【解决办法:放弃readonly属性,采用disabled属性方法】
<input type="text" name="email" disabled="disabled">
js部分
-
ie下input框的change事件不能用enter键触发【解决办法:用键盘捕捉事件,判断键值是否等于‘13’(enter),满足条件再调用change事件】
function IsIe() { if ( !!window["ActiveXObject"] || "ActiveXObject" in window ) { return true; } else { return false; } } function getEnterEvent(e) { if (isIe) { if (e.keyCode == 13) { //注意判断值没有发生变化时不做修改 } } }