某公司Web前端开发面试题

http://mianshiti.diandian.com/post/2012-10-26/40041237414

一、写出几种IE6 BUG的解决方法。

这里能写多少是多少，最好把自己遇到的全写出来。可以借鉴http://css.doyoe.com/ 问题和经验列
表，里面应有尽有。写几个常见的：

1.解决IE6及更早浏览器浮动时产生双倍边距的BUG

display:inline
2.如何解决IE6下的文本溢出BUG(行业内称：多出一只猪)

删除2个div之间所有的注释；

不设置浮动；

调整2个div的宽度，比如将宽度调整为更小一点，刷新页面看效果。
3.DIV浮动IE文本产生3象素的bug
左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距. #box{
float:left; width:800px;} #left{ float:left; width:50%;}
#right{ width:50%;} *html #left{ margin-right:-3px; //这句是关键} <div id=”box”>
<div id=”left”></div> <div id=”right”></div> </div>
4.css hack
5.如果这道题出的不是IE6 而是让你列举各浏览器之间的兼容性解决方法，就要写死了。。太多太多
二、如果让一个div在页面中垂直居中（动动脑子，其实方法很多，各有利弊）
1.绝对定位法<div style=’position:absolute;top:50%;left:50%;’></div>
2.单行垂直居中（重点是里面的文字是单行）

div {

height:25px;

line-height:25px;

overflow:hidden;

}
3.多行未知高度文字的垂直居中
div {

padding:xxpx; （谁都会吧）

}
4.多行文本固定高度的垂直居中 （IE6不能正确地理解display:table和display:table-cell，所以要
用css hack，想知道为什么这样做，可以参考 http://www.cnblogs.com/chuncn/archive/2008/10/09/1307321.html，） div#wrap父容器 {

display:table;

border:1px solid #FF0099;

background-color:#FFCCFF;

width:760px;

height:400px;

_position:relative;

overflow:hidden;

}

div#subwrap子容器 {

vertical-align:middle;

display:table-cell;

_position:absolute;

_top:50%;

}

div#content内容 {

_position:relative;

_top:-50%;

}
三、如何让2个并列的div自动等高（不设高度）

注：如果能写出3种常见方法固然最好，但最好写一下各自优缺点，否则面试时肯定会问你为什么这样
写
1、背景模拟法（假高度），按照尺寸制作背景，平铺，当内容增多时，背景就会向下纵向重复，看起
来就向左右两个div都自动向下延伸了一样。
2、表格嵌套法（不难理解，表格都是等高的，就是在div中嵌套表格）
3、内外补丁法（最推荐的方法，因为只用css实现的，但初学者不易理解）

* { margin:0; padding:0; }

#wrap {

overflow:hidden; (这行代码是重点，否则你会看到页面很长很长)

padding:0;

padding-left:180px;（内补丁）

}

#left,#right {

height:auto;

margin-bottom:-10000px;（外补丁）

padding-bottom:10000px;（内补丁）

}

#left {

display:inline;

float:left;

width:180px;

margin-left:-180px;（外补丁）

background: #0CF;

}

#right{

float:right;

width:100%;

background: #FC6;

}
这里说一下内外补丁，其实也没那么难理解，我的理解就是相互抵消。多用用margin负值，你会了解这
个原理的。
四、宽度自适应三栏的布局方式

三种方法：

1、绝对定位法（最易理解）

左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离。于是实
现了三栏自适应布局。
html,body{margin:0; height:100%;}

#left,#right{position:absolute; top:0; width:200px; height:100%;}

#left{left:0; background:#a0b3d6;}

#right{right:0; background:#a0b3d6;}

#main{margin:0 210px; background:#ffe6b8; height:100%;}
<div id=”left”></div>

<div id=”main”></div>

<div id=”right”></div>
2、margin负值法（不易理解）
html,body{margin:0; height:100%;}

#main{width:100%; height:100%; float:left;}

#main #body{margin:0 210px; background:#ffe6b8; height:100%;}

#left,#right{width:200px; height:100%; float:left; background:#a0b3d6;}

#left{margin-left:-100%;}

#right{margin-left:-200px;}
<div id=”main”>

<div id=”body”></div>

</div>

<div id=”left”></div>

<div id=”right”></div>
重点是第一个div是中间的main，且必须套一个容器。
3、浮动法（最常见）
html,body{margin:0; height:100%;}

#main{height:100%; margin:0 210px; background:#ffe6b8;}

#left,#right{width:200px; height:100%; background:#a0b3d6;}

#left{float:left;}

#right{float:right;}
<div id=”left”></div>

<div id=”right”></div>

<div id=”main”></div>
重点是中间的main要放在标签最后，缺点是需要用clear:both
五、一小张效果图，大致内容是一个图片列表，ul内边距左：10px 右：10px。ul中的li右边距30px，
但最后一个li距离ul只有10px，也就是ul有边框，里面的li图片列表也有边框。（这些属性是定死的，
你不能修改，要求写出这段css代码）
这道题，其实也是考你的内外补丁掌握，大致方法是，ul设置左右内边距后，设置li的margin负值，这
样li在ul的框里就居中了。还有一种比较傻瓜的办法，设置li的margin-right:30px的后，最后一个li
需要改class，把margin-right清掉。
六、谈谈你对WEB标准以及W3C的理解与认识。

这题网上随便找找都有，大致要点:标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用
外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内
容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打
印版本而不需要复制内容、提高网站易用性。