标签：浏览器 margin 前端 width 兼容性问题 obj IE event
目录
2、IE6双边距问题；在IE6中设置float，同时又设置margin，会出现边距加倍问题
4、边距重叠问题；当相邻两个元素都设置了margin边距时，
6、firefox浏览器不支持cursor：hand显示手型
19、chrome默认会将小于12px的文本强制按照12px来解析
21、两个块级元素，父元素设置了overflow:auto；子元素设置了position:relative ;
5、innerText在IE中能正常工作，但在FireFox中却不行
样式相关：
1、不同浏览器标签默认的margin和padding不同
css里增加通配符*{margin：0；padding：0}
2、IE6双边距问题；在IE6中设置float，同时又设置margin，会出现边距加倍问题
块属性标签：设置display：inline即可
行内属性标签：设置display:block后采用float布局，又有横行margin的情况
在display:block;后面加入display:inline;display:table;
3、DIV浮动IE文本产生3象素的bug
左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距
#left { margin-right:-3px; }
4、边距重叠问题；当相邻两个元素都设置了margin边距时，
margin将取最大值，舍弃最小值
5、图片默认有间距
使用float为img布局
6、firefox浏览器不支持cursor：hand显示手型
统一使用cursor：pointer
7、IE9以下浏览器不能使用opacity
opacity：0.5；
filter：alfha（opacity=50）；
filter：progid：DXlmageTransform.Microsoft.Alfha(style=0,opacity=50);
8、对象宽高赋值问题
FireFox中类似obj.style.height = imgObj.height的语句无效
9、IE下的宽高问题
IE不识别min-这个定义，它把正常的width和height当作有min-的情况来使
如果只用width和height，正常浏览器里宽高就是固定的，
如果只用min-width和min-height，IE下面相当于没有设置宽高
解决方法：#box{ width: 80px; height: 35px;
width: auto !important; height: auto !important;
min-width: 80px; min-height: 35px;
overflow:visible;}
10、css中的width和margin
div{width:300px;margin:0 10px 0 10px;}
IE5理解为300px-10px(右填充)-10px(左填充)，最终div的宽度为280px，
IE6和其他浏览器上宽度则是以 300px+10px(右填充)+10px(左填充)=320px来计算
解决方法：div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
11、css中的width和padding
在IE7和FireFox中width宽度不包括padding，在Ie6中包括padding
12、css中的width和border
div{width:100;border:1px;}
IE理解为box.width =100
FireFox理解为box.width =100 + 1*2 = 102 //加上边框2px
解决方法：div{margin:30px!important;margin:28px;}
注意：这两个margin的顺序一定不能写反，
IE不能识别!important这个属性，但别的浏览器可以识别，
所以在IE下其实解释成这样：div{maring:30px;margin:28px
重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important
13、为什么无法定义1px左右高度的容器
IE6是因为默认的行高造成的
解决方法：overflow:hidden; zoom:0.08; line-height:1px;
14、ul和ol列表缩进问题
IE中仅仅设置margin:0px即可达到最终效果，
Firefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才可以
15、FORM标签的margin问题
IE中,将会自动margin一些边距,而在Firefox中margin则是0,
最好在css中指定form{margin:0;padding:0;}
16、超链接访问过后hover样式就不出现的问题
被点击访问过的超链接样式不在具有hover和active，需改变CSS属性的排列顺序: L-V-H-A
a:link {}
a:visited {}
a:hover {}
a:active {}
17、web标准中IE无法设置滚动条颜色
解决办法：将body换成html
html {
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eeeeee;
scrollbar-3dlight-color:#eeeeee;
scrollbar-arrow-color:#000;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff;
}
18、字体大小small定义不同
Firefox为13px，而IE为16px
使用指定的字体大小xxpx或xxem
19、chrome默认会将小于12px的文本强制按照12px来解析
解决办法：给其添加属性：-webkit-text-size-adjust: none;
20、怎样让层显示在FLASH之上
解决办法：给FLASH设置透明 <param name="wmode" value="transparent" />
21、两个块级元素，父元素设置了overflow:auto；子元素设置了position:relative ;
且高度大于父元素，在IE6、IE7会被隐藏而不是溢出
解决办法：父级元素设置position:relative
22、IE8浏览器对选择器支持情况
IE8支持:first-child,但不支持:last-child、:last-of-type、:first-of-type、:nth-child(n)、:nth-last-child(n)、
:nth-of-type(n)、:nth-last-of-type(n)、:enable、:disable 、:checked
IE8对before、after 等伪类选择器不支持
语法相关：
1、const问题
IE下，只能使用var关键字来定义常量
解决方法：统一使用var关键字来定义常量
2、事件绑定
IE:dom.attachEvent();
其他浏览器：dom.addEventListener();
解决办法：
function addEventListener(obj,event,fn,boo){
if(obj.addEventListener){
obj.addEventListener(event,fn,boo);
}else if(obj.attachEvent){
obj.attachEvent('on' + event,fn);
}
}
3、移除事件绑定
IE:dom.detachEvent();
其他浏览器：dom.removeEventListener();
解决办法：
function removeEventListener(obj,event,fn,boo){
if(obj.removeEventListener){
obj.removeEventListener(event,fn,boo);
}else if(obj.detachEvent){
obj.detachEvent('on' + event,fn);
}
}
4、HTML对象获取问题
FireFox：document.getElementById(“idName”);
IE：document.idname或者document.getElementById(“idName”)
解决方法：统一使用document.getElementById(“idName”);
5、innerText在IE中能正常工作，但在FireFox中却不行
解决方法:
if(navigator.appName.indexOf("Explorer") > -1){
document.getElementById('element').innerText = "my text";
} else{
document.getElementById('element').textContent = "my text";
}
6、获取事件源的兼容
IE下，event对象有srcElement属性，但是没有target属性；
Firefox下，event对象有target属性，但是没有srcElement属性
解决方法:
var target = event.target || event.srcElement;
7、event.x与event.y问题
IE下,event对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.
解决方法:
mX(mX = event.x ? event.x : event.pageX;)
8、window.location.href问题
IE或者Firefox2.0.x下,可以使用window.location或window.location.href;
Firefox1.5.x下,只能使用window.location
解决方法：统一使用window.location
待完善......
标签：浏览器,margin,前端,width,兼容性问题,obj,IE,event 来源： https://blog.csdn.net/weixin_53416425/article/details/122198020
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。