1,浏览器兼容问题一:不同浏览器的标签默认的margin和padding不同
问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大
碰到频率:100%
解决方案:CSS里 *{margin:0;padding:0;}
2、块属性标签float后,又有横向的margin情况下,在IE6显示margin比设置的大
问题表现:IE6后面的一块被顶到下一行
解决方案:在float的标签样式控制中加入display:inline;转化为行内属性
备注:横向浮动的div布局,使用上margin进行边界设置时,必然会碰到此问题
3、设置较小高度标签(一般小于10px),在IE6、IE7,遨游中高度超出设置高度值
问题表现:IE6、7和遨游里这个标签的高度不受控制,超出自己设置的高度
解决方案:给超出高度的标签设置overflow:hidden;或者设置行高line-height小于你设置的高度
备注:一般出现在设置小圆角背景的标签里。出现该问题原因是IE8之前的浏览器都会给标签一个最小默认行高的高度,即使标签是空内容,标签的高度还是会有默认行高。
4、行内属性标签,设置display:block后采用float布局,又有横向的margin情况,IE6间距bug
问题表现:IE6的间距比超过设置的间距
解决方案:在display:block;后面加入display:inline;display:table;
备注:行内属性标签,为了设置宽度,需要设置为display:block;(表单元素除外)在用float布局且有横向margin后,在IE6下,就具有了块属性float后的横向margin的bug。由于设置为display:inline,高度失效,所有在后面补上display:table。
5、图片默认有间距
问题表现:几个img标签放在一块,有些浏览器会有默认的间距,有通配符也不起作用
解决方案:使用float属性为img布局
备注:img标签是行内属性标签,只要不超出容器高度,img会排在一行里,使用float是比较好的选择
6、标签最低高度设置min-height不兼容
问题表现:min-height本身就是一个不兼容的css属性,所以设置min-height时不能兼容所有浏览器
解决方案:如果设置一个标签最小高度为200px,需要进行设置 {min-height:200px;height:auto !important;height: 200px; overflow:visible;}
备注:b/s系统前端时,当内容小于一个值时,容器的高度保持该值,当内容大于该值时,高度自适应且不出现滚动条。
7、边距重叠问题;
问题表现:当相邻两个元素都设置了margin 边距时,margin 将取最大值,舍弃最小值;
解决方案:为了不让边重叠,可以给子元素增加一个父级元素,并设置父级元素为overflow:hidden;
8、透明度的兼容CSS设置
.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
9、键盘事件 keyCode 兼容性写法
var inp = document.getElementById('inp')
var result = document.getElementById('result')
function getKeyCode(e) {
e = e ? e : (window.event ? window.event : "")
return e.keyCode ? e.keyCode : e.which
}
inp.onkeypress = function(e) {
result.innerHTML = getKeyCode(e)
}
10、求窗口大小的兼容写法
// 浏览器窗口可视区域大小(不包括工具栏和滚动条等边线)
// 1600 * 525
var client_w = document.documentElement.clientWidth || document.body.clientWidth;
var client_h = document.documentElement.clientHeight || document.body.clientHeight;
// 网页内容实际宽高(包括工具栏和滚动条等边线)
// 1600 * 8
var scroll_w = document.documentElement.scrollWidth || document.body.scrollWidth;
var scroll_h = document.documentElement.scrollHeight || document.body.scrollHeight;
// 网页内容实际宽高 (不包括工具栏和滚动条等边线)
// 1600 * 8
var offset_w = document.documentElement.offsetWidth || document.body.offsetWidth;
var offset_h = document.documentElement.offsetHeight || document.body.offsetHeight;
// 滚动的高度
var scroll_Top = document.documentElement.scrollTop||document.body.scrollTop;
11、DOM 事件处理程序的兼容写法
var eventshiv = {
// event兼容
getEvent: function(event) {
return event ? event : window.event;
},
// <span class="hljs-built_in">type</span>兼容
getType: <span class="hljs-keyword">function</span>(event) {
<span class="hljs-built_in">return</span> event.type;
},
// target兼容
getTarget: <span class="hljs-keyword">function</span>(event) {
<span class="hljs-built_in">return</span> event.target ? event.target : event.srcelem;
},
// 添加事件句柄
addHandler: <span class="hljs-keyword">function</span>(elem, <span class="hljs-built_in">type</span>, listener) {
<span class="hljs-keyword">if</span> (elem.addEventListener) {
elem.addEventListener(<span class="hljs-built_in">type</span>, listener, <span class="hljs-literal">false</span>);
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (elem.attachEvent) {
elem.attachEvent(<span class="hljs-string">'on'</span> + <span class="hljs-built_in">type</span>, listener);
} <span class="hljs-keyword">else</span> {
// 在这里由于.与<span class="hljs-string">'on'</span>字符串不能链接,只能用 []
elem[<span class="hljs-string">'on'</span> + <span class="hljs-built_in">type</span>] = listener;
}
},
// 移除事件句柄
removeHandler: <span class="hljs-keyword">function</span>(elem, <span class="hljs-built_in">type</span>, listener) {
<span class="hljs-keyword">if</span> (elem.removeEventListener) {
elem.removeEventListener(<span class="hljs-built_in">type</span>, listener, <span class="hljs-literal">false</span>);
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (elem.detachEvent) {
elem.detachEvent(<span class="hljs-string">'on'</span> + <span class="hljs-built_in">type</span>, listener);
} <span class="hljs-keyword">else</span> {
elem[<span class="hljs-string">'on'</span> + <span class="hljs-built_in">type</span>] = null;
}
},
// 添加事件代理
addAgent: <span class="hljs-keyword">function</span> (elem, <span class="hljs-built_in">type</span>, agent, listener) {
elem.addEventListener(<span class="hljs-built_in">type</span>, <span class="hljs-keyword">function</span> (e) {
<span class="hljs-keyword">if</span> (e.target.matches(agent)) {
listener.call(e.target, e); // this 指向 e.target
}
});
},
// 取消默认行为
preventDefault: <span class="hljs-keyword">function</span>(event) {
<span class="hljs-keyword">if</span> (event.preventDefault) {
event.preventDefault();
} <span class="hljs-keyword">else</span> {
event.returnValue = <span class="hljs-literal">false</span>;
}
},
// 阻止事件冒泡
stopPropagation: <span class="hljs-keyword">function</span>(event) {
<span class="hljs-keyword">if</span> (event.stopPropagation) {
event.stopPropagation();
} <span class="hljs-keyword">else</span> {
event.cancelBubble = <span class="hljs-literal">true</span>;
}
};