前端面试题总结-Html
一.兼容性问题
1.浏览器默认的margin和padding不同。
- 解决方案是加一个全局的*{margin:0;padding:0;}来统一(不推荐)。
- 或者使用sass的reset模块重置
- 附：淘宝初始化方法:
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; } h1, h2, h3, h4, h5, h6{ font-size:100%; } address, cite, dfn, em, var { font-style:normal; } code, kbd, pre, samp { font-family:couriernew, courier, monospace; } small{ font-size:12px; } ul, ol { list-style:none; } a { text-decoration:none; } a:hover { text-decoration:underline; } sup { vertical-align:text-top; } sub{ vertical-align:text-bottom; } legend { color:#000; } fieldset, img { border:0; } button, input, select, textarea { font-size:100%; } table { border-collapse:collapse; border-spacing:0; }
2.png24位的图片在iE6浏览器上出现背景
解决方案是做成PNG8.
3.ie6双边距bug
- 块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
- 浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;}
- 这种情况之下IE会产生20px的距离
- 解决方案是在float的标签样式控制中加入:_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)
4.css中的IE浏览器识别:渐进识别的方式，从总体中逐渐排除局部。
- 首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。
- 接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
.bb{ background-color:#f1ee18;/*所有识别*/ .background-color:#00deff\9; /*IE6、7、8识别*/ +background-color:#a200ff;/*IE6、7识别*/ _background-color:#1e0bd1;/*IE6识别*/ }
5.IE下,even对象有x,y属性,但是没有pageX,pageY属性;Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.
6.Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示
可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.
7.让老ie浏览器支持html5
- 直接使用成熟的框架、使用最多的是html5shim框架
- 引入文件<!--[if IE]> <script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script> <![endif]-->
- 将上代码复制到head部分，记住一定要是head部分
- 最后在css里面加上这段:
- /*html5*/ article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
8.如何让老浏览器支持websocket
Adobe Flash Socket，基于长轮询的 XHR
9.ie上没有min-width属性
- 用css表达式
-
#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" ); }
10.LI中内容超过长度后以省略号显示的方法
li {
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}
11.滚动条样式
12.自动换行
- IE中直接使用 word-wrap:break-word 就可以了, FF中我们使用JS插入 的方法来解决
-
function toBreakWord(el, intLen){ var ōbj=document.getElementById(el); var strContent=obj.innerHTML; var strTemp=""; while(strContent.length>intLen){ strTemp+=strContent.substr(0,intLen)+" "; strContent=strContent.substr(intLen,strContent.length); } strTemp+=" "+strContent; obj.innerHTML=strTemp; } if(document.getElementById && !document.all) toBreakWord("ff", 37);