网页制作常见的面试题(怎样兼容IE6/IE7/火狐浏览器)
1、IE6双边距问题?
在IE6的浏览器中明明设置的是10px的margin却为什么显示的是20px的margin其实这个Ie6的一个双边距BUG
例如:
<style type="text/css">
body {margin:0}
div { float:left; margin-left:10px; width:300px; height:300px; border:1px solid red; }
</style>
因为加上浮动后就会多出一倍的边距,浮动后本来外边距10px,但IE6会解析成20px,只需要在div的样式里加上display:inline;就可以解决以上问题。
2、为什么中火狐浏览器下文本无法撑开容器的高度?
标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢?办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的 IE6 可以这样定义:
3、如何定义1px左右高度的容器?
IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line- height:1px
4、为什么web标准中无法设置IE浏览器滚动条颜色了?
原来样式设置:
body { 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; }
</style>
解决办法是将body换成html
5、怎样使一个div层居中于浏览器中?
div {
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid red;
}
</style>
这里使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二
假定有如下情况:
<div id="b"> </div>
</div>
如果要实现b在a中居中放置,一般只需用CSS设置a的text-align属性为center。这样的方法在IE里看起来一切正常;但是在Firefox中b却会是居左的。
解决办法就是设置b的横向margin为auto。例如设置b的CSS样式为:margin: 0 auto;。
被点击访问过的超链接样式不再具有hover和active样式了,解决方法是改变CSS属性的排列顺序: L-V-H-A
<div>
<img src=”" mce_src=”" />
</div>
把div的border打开,你发现图片底部不是紧贴着容器底部的,是img后面的空白字符造成,要消除必须这样写
<div>
<img src=”" mce_src=”" /></div>
后面两个标签要紧挨着。ie7下这个bug 依然存在。解决方案:给img设定 display:block。
9、怎么样才能让flash透明显示在层上面之上呢?
<div class="banner" style="background:url(../images/ad.jpg);width:1108px;height:72px;
overflow:hidden; ">
<EMBED align=right src="../images/3.swf" width="1108" height="72" type=application/octet-stream
wmode="transparent"quality="high" ></EMBED>
<EMBED align=left src="../images/95.swf" width=1108 height=72 type=application/octet-stream
wmode="transparent"quality="high" ></EMBED>
</div>
宽和高一定要和层的一样
10、为什么FF下文本无法撑开容器的高度?
标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢?办法就是去掉he ight设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义:
div { height:auto!important; height:200px; min-height:200px; }
11、IE6断头台问题
<div id="layout">
<div id="left">
<p>从打火机发动机是分开了从打火机发动机是分开了从打火机发动机是分开了从打火机发动机是分开了从打火机发动机是分开了从打火机发动机是分开了从打火机发动机是分开了从打火机发动机是分开了从打火机发动机是分开了</p>
</div>
<a href="#">链接1</a>
<a href="#">链接2</a>
<a href="#">链接3</a>
<a href="#">链接4</a>
#layout{width:400px; border:5px solid #d4ca25;}
#left{width:200px; float:left;border:5px solid #35bb0c;}
当网页打开的时候页面显示正常,但鼠标指向右面对象“链接3”以及“链接4”的时候,主对象#layout下面被切掉,剩下的高度刚好是4个链接的高度。当鼠标再回到“链接1”,左侧的高度又恢复,
解决方法:把四个链接用<div id=right></div>包起来,给#right{floatleft;}
网页制作常见的面试题(怎样兼容IE6/IE7/火狐浏览器)的更多相关文章
- 网页制作常见的问题(怎样兼容IE6/IE7/火狐浏览器)
1.IE6双边距问题? 在IE6的浏览器中明明设置的是10px的margin却为什么显示的是20px的margin其实这个Ie6的一个双边距BUG 例如: <style type="t ...
- 兼容IE6/IE7/IE8/FireFox的css hack
兼容IE6/IE7/IE8/FireFox的css hack .color{ background-color: #CC00FF; background-color: #FF00009; *backg ...
- [转载]使用兼容ie6 ie7 ie8 FF的text-overflow:ellips
使用兼容ie6 ie7 ie8 FF的text-overflow:ellipsis超出文本显示省略号来代替截取函数更有利于seo,如果使用截取函数,源代码中的标题是显示不完整的,即便是在title属性 ...
- 给Select赋值 innerHTML 不兼容IE6\IE7\IE8\IE9
<select class="b-select" id="location-province" name="Province" def ...
- div+css 布局下兼容IE6 IE7 FF常见问题
div+css 布局下兼容IE6 IE7 FF常见问题 收藏 所有浏览器 通用 (市面上主要用到的IE6 IE7 FF)height: 100px; IE6 专用 _height: 100px; IE ...
- 下拉菜单select高度(兼容IE6/IE7/IE8/火狐等主流浏览器)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 在页面左右一个悬浮div兼容IE6 IE7 8 9 Firefox chrome
在页面左右一个悬浮div兼容IE6 IE7 8 9 Firefox chrome #identifier-pannel { bottom: 345px; margin-left: 512px; pos ...
- CSS兼容IE6 IE7 IE8 IE9 Firefox的总结
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS完美兼容IE6/IE7/IE8/IE9/IE10的通用方法
关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一.CSS HACK 以下两种方法几乎能解决现今所有HA ...
随机推荐
- android 基站定位
package cn.LocationStation; import java.io.BufferedReader; import java.io.InputStream; import java.i ...
- android学习日记03--常用控件ListView
常用控件 8.ListView 列表视图,比如游戏的排行榜.列表数据可以根据屏幕大小自适应 列表的显示需要三个元素: a.ListVeiw:用来展示列表的View. b.适配器:用来把数据映射到Lis ...
- Docker intercontainer 网络解释
https://segmentfault.com/a/1190000000669312
- [Effective C++ --012]复制对象时勿忘其每一个成分
引言: 在深拷贝和浅拷贝的理解中,我们知道了“拷贝构造函数”一词,并且也了解了它的构成. A(const A& r); // 形式有多种,在这里只列出一个 因此,在值传递的应用场景里,我们可以 ...
- 一个响应式数据库框架SQLBrite,完美解决数据库和UI的同步更新!
相信小伙伴们在开发中或多或少都可能遇到过这样的问题:打开一个应用后,为了快速响应,先将数据库中的数据呈现给用户,然后再去网络上请求数据,请求成功之后将数据缓存至数据库,同时更新UI,但是我们经常会这样 ...
- Android(java)学习笔记119:继承中父类没有无参构造
/* 如果父类没有无参构造方法,那么子类的构造方法会出现什么现象呢? 报错. 如何解决呢? A:在父类中加一个无参构造方法 B:通过使用super关键字去显示的调用父类的带参构造方法 C:子类通过th ...
- javascript笔记07:使用Object类为实例定义方法和属性
function Person() {} Person.prototype = { nickName:"john", , showInfo:function() { return ...
- win7 cmd命令行窗口 宽度无法变大 自由调整大小
偶然遇到了这个问题,百度查到了解决方案,执行一个bat批处理命令. mode con lines=40 mode con cols=160 color 250 cls @cmd
- Xamarin 安装体验
1.先从官网下载https://www.xamarin.com/downloadXamarin for Visual Studio 2.MAC上下载https://store.xamarin.com/ ...
- 提高查询速度:SQL Server数据库优化方案
查询速度慢的原因很多,常见如下几种: 1.没有索引或者没有用到索引(这是查询慢最常见的问题,是程序设计的缺陷) 2.I/O吞吐量小,形成了瓶颈效应. 3.没有创建计算列导致查询不优化. 4.内存不足 ...