前端模拟试题javascript.docx
《前端模拟试题javascript.docx》由会员分享，可在线阅读，更多相关《前端模拟试题javascript.docx（24页珍藏版）》请在冰豆网上搜索。
前端模拟试题javascript
JavaScript模拟试题
一、单选题
1.我们可以在下列哪个HTML元素中放置Javascript代码？
A.
41.在JavaScript中定时调用函数foo（）如何写？
参考答案：
functionfoo（）{
alert（"aaaa"）;
a=setTimeout（foo（）,100）;
}
foo（）;
8：
你做的页面在哪些流览器测试过？
这些浏览器的内核分别是什么?
经常遇到的浏览器的兼容性有哪些？
怎么会出现？
解决方法是什么？
点评：
css的兼容性也是大家关注的热点。
大家一定要注意多测试。
Javascript多浏览器兼容性问题及解决方案
兼容性处理要点
1、DOCTYPE影响CSS处理
2、FF:
设置padding后，div会增加height和width，但IE不会，故需要用!
important多设一个height和width
3、FF:
支持!
important，IE则忽略，可用!
important为FF特别设置样式
4、div的垂直居中问题:
vertical-align:
middle;将行距增加到和整个DIV一样高line-height:
200px;然后插入文字，就垂直居中了。
缺点是要控制内容不要换行
5、在mozillafirefox和IE中的BOX模型解释不一致导致相差2px解决方法：
div{margin:
30px!
important;margin:
28px;}
注意这两个margin的顺序一定不能写反，!
important这个属性IE不能识别，但别的浏览器可以识别。
所以在IE下其实解释成这样：
div{maring:
30px;margin:
28px}
重复定义的话按照最后一个来执行，所以不可以只写margin:
XXpx!
important;
浏览器差异
1、ul和ol列表缩进问题
消除ul、ol等列表的缩进时，样式应写成：
list-style:
none;margin:
0px;padding:
0px;
其中margin属性对IE有效，padding属性对FireFox有效。
[注]经验证，在IE中，设置margin:
0px可以去除列表的上下左右缩进、空白以及列表编号或圆点，设置padding对样式没有影响；在Firefox中，设置margin:
0px仅仅可以去除上下的空白，设置padding:
0px后仅仅可以去掉左右缩进，还必须设置list-style:
none才能去除列表编号或圆点。
也就是说，在IE中仅仅设置margin:
0px即可达到最终效果，而在Firefox中必须同时设置margin:
0px、padding:
0px以及list-style:
none三项才能达到最终效果。
2、CSS透明问题
IE：
filter:
progid:
DXImageTransform.Microsoft.Alpha（style=0,opacity=60）。
FF：
opacity:
0.6。
[注]最好两个都写，并将opacity属性放在下面。
3、CSS圆角问题
IE：
ie7以下版本不支持圆角。
FF：
-moz-border-radius:
4px，或者-moz-border-radius-topleft:
4px;-moz-border-radius-topright:
4px;-moz-border-radius-bottomleft:
4px;-moz-border-radius-bottomright:
4px;。
[注]圆角问题是CSS中的经典问题，建议使用JQuery框架集来设置圆角，让这些复杂的问题留给别人去想吧。
不过jQuery的圆角只看到支持整个区域的圆角，没有支持边框的圆角，不过这个边框的圆角可以通过一些简单的手段来实现，下次有机会介绍下。
4、cursor:
handVScursor:
pointer
问题说明：
firefox不支持hand，但ie支持pointer，两者都是手形指示。
解决方法：
统一使用pointer。
5、字体大小定义不同
对字体大小small的定义不同，Firefox中为13px，而IE中为16px，差别挺大。
解决方法：
使用指定的字体大小如14px。
并列排列的多个元素（图片或者链接）的div和div之间，代码中的空格和回车在firefox中都会被忽略，而IE中却默认显示为空格（约3px）。
6、CSS双线凹凸边框
IE：
border:
2pxoutset;。
FF：
-moz-border-top-colors:
#d4d0c8white;-moz-border-left-colors:
#d4d0c8white;-moz-border-right-colors:
#404040#808080;-moz-border-bottom-colors:
#404040#808080;
浏览器bug
1、IE的双边距bug
设置为float的div在ie下设置的margin会加倍。
这是一个ie6都存在的bug。
解决方案：
在这个div里面加上display:
inline;
例如：
<#divid=”imfloat”>
相应的css为
以下为引用的内容：
复制代码代码如下:
#IamFloat{
float:
left;
margin:
5px;/*IE下理解为10px*/
display:
inline;/*IE下再理解为5px*/
}
#IamFloat{
float:
left;
margin:
5px;/*IE下理解为10px*/
display:
inline;/*IE下再理解为5px*/
}
关于CSS中的问题实在太多了，甚至同样的CSS定义在不同的页面标准中的显示效果都是不一样的。
一个合乎发展的建议是，页面采用标准XHTML标准编写，较少使用table，CSS定义尽量依照标准DOM，同时兼顾IE、Firefox、Opera等主流浏览器。
很多情况下，FF和Opera的CSS解释标准更贴近CSS标准，也更具有规范性。
2、IE选择符空格BUG
今天在给博客的段落样式设置首字符样式的时候发现，原来一个空格也可以使样式失效。
请看以下代码：
复制代码代码如下:
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""//.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
--
p{font-size:
12px;}
p:
first-letter{font-size:
300%}
-->
对于世界而言，你是一个人；但是对于某个人，你是他的整个世界。
纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。