首先我们说说firefox和IE对CSS的宽度显示有什么不同:
其实CSS ’width’ 指的是标准CSS中所指的width的宽度,在firefox中的宽度就是这个宽度。它只包含容器中内容的宽度。而Internet Explorer ’width’则是指整个容器的宽度,包括内容,padding ,border。
Firefox中:容器占的宽度=内容宽度+padding宽度+border宽度
IE中:内容宽度=您定义的容器宽度(Internet Explorer ’width’)-padding宽度-border宽度
所以,如果IE中定义 width:120px;padding:5px 的话,所显示的宽度就是120px.
即padding:5px是在width里面。
而Firefox中,上面这个定义,显示宽度就是 125 px;
所以,我们就必须这样定义
width:115px !important;width:120px;padding:5px;
必须注意的是, !important; 一定要在前面。
CSS 兼容要点:
DOCTYPE 影响 CSS 处理
FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行
FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中
FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width
FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式
div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行
cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以
FF: 链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格
XHTML+CSS兼容性解决方案小集
使用XHTML+CSS构架好处不少,但也确实存在一些问题,不论是因为使用不熟练还是思路不清晰,我就先把一些我遇到的问题写在下面,省的大家四处找^^
在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法:
div{margin:30px!important;margin:28px;}注意这两个margin的顺序一定不能写反,据阿捷的说法!important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样:
div{maring:30px;margin:28px}重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx!important;
IE5 和IE6的BOX解释不一致IE5下div{width:300px;margin:0 10px 0 10px;}div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px,而在IE6和其他浏览器上宽度则 是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改
div{width:300px!important;width /**/:340px;margin:0 10px 0 10px},关于这个/**/是什么我也不太明白,只知道IE5和firefox都支持但IE6不支持,如果有人理解的话,请告诉我一声,谢了!:)
ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义
ul{margin:0;padding:0;}就能解决大部分问题
关于脚本,在xhtml1.1中不支持language属性,只需要把代码改为
<script type="text/javascript">就可以了
margin加倍的问题
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
解决方案是在这个div里面加上display:inline;
例如:
<#div id="imfloat"></#div>
相应的css为
#IamFloat{
float:left;
margin:5px;/*IE下理解为10px*/
display:inline;/*IE下再理解为5px*/}
分享到:
相关推荐
以下是一些针对IE与Firefox的CSS兼容性的要点: 1. **DOCTYPE的影响**:DOCTYPE声明会影响浏览器进入不同的渲染模式。在IE中,没有正确的DOCTYPE会导致浏览器进入“quirks模式”,而Firefox则会遵循更接近标准的...
但是,我们今天要讨论的下拉菜单,是完全使用CSS实现的,不依赖JavaScript,并且兼容IE6、IE7和Firefox。 首先,我们来理解CSS下拉菜单的工作原理。在纯CSS下拉菜单中,链接的显示与隐藏主要通过CSS中的伪类`:hover...
- 在Firefox和IE中,BOX模型的解释不一致,有时会导致宽度和高度的差异,需要通过特定的CSS hack来解决。 - IE5和IE6在BOX模型上的解释也存在差异,例如,IE5下会将宽度解释为减去填充后的宽度,而IE6则加上填充...
本文介绍了如何开发一个兼容IE和Firefox的轻量级XHTML右键菜单。通过合理利用CSS和JavaScript技术,不仅实现了菜单的基本功能,还保证了良好的用户体验。未来,随着更多浏览器版本的更新迭代,这种轻量级且高度兼容...
- **知识点**:Firefox(FF)和Internet Explorer(IE)对于`margin-left`和`margin-right`自动(auto)值的处理有所不同。在FF中,当div的左右margin设置为auto时,元素会自动居中;但在IE中则不行,需要额外处理。...
为了使DIV能够兼容各种浏览器,特别是IE6、IE7以及Firefox,可以遵循以下原则: ##### 1. 有浮必清,方能兼容 - **解释**:当元素使用`float`属性进行布局时,可能会导致父容器无法正确包裹子元素,造成布局错乱。...
- **应用场景**:例如,在处理最小宽度(`min-width`)时,可以针对IE7和Firefox设置一个值,同时为IE6设置另一个值。 - **优势**:简化了跨浏览器兼容性的处理过程,使得开发者可以更加专注于核心功能而非兼容性...
- 网站代码兼容IE9及以上版本、Firefox、Chrome、Safari等主流浏览器。 - 使用媒体查询实现响应式设计,使网站能在不同设备上良好显示。 5. **性能优化**: - 优化图片大小,减少加载时间。 - 使用缓存机制提高...
6. **CSS调试工具**:如Firefox的Web Developer、DOM Inspector、Internet Explorer Developer Toolbar和Firebug等,辅助开发者调试和优化CSS代码。 7. **避免多余的选择器**:简化CSS选择器,例如将`ul li`、`ol ...
/* CSS Hack For Firefox */ *margin-bottom: 12px; /* CSS Hack For IE7 & IE6 */ _margin-bottom: 3%; /* CSS Hack For IE6 */ white-space: nowrap; } #Main_News { border: 1px #acd0f0 solid; width: ...
5. **浏览器兼容性**:考虑到不同的浏览器可能存在差异,开发者需要确保代码在主流浏览器(如Chrome、Firefox、Safari、Edge和IE)上都能正常运行。这可能需要用到一些跨浏览器的解决方案,例如使用polyfills引入...
- **兼容性**:确保网页能在不同的浏览器(如Chrome、Firefox、Safari等)上正常显示,提高用户体验。 - **响应式设计**:支持不同设备屏幕大小(手机、平板电脑、桌面电脑),保证在各种设备上都能提供良好的浏览...
兼容性方面,文章中明确指出了该进度条支持包括IE6/7/8、Chrome4、Firefox3.5等在内的多种浏览器版本。这一点非常重要,因为在实际应用中,我们需要确保所开发的进度条可以在不同的浏览器环境下正常显示,以覆盖更...
为了解决这个问题,IE浏览器使用了 `styleFloat` 属性,而其他浏览器如Mozilla Firefox等则使用了 `cssFloat`。所以,当我们需要在JavaScript中设置元素的浮动样式时,应当区分不同的浏览器: ```javascript var ...
- **浏览器支持**: 测试主要浏览器(如Chrome、Firefox、Safari等)中的显示效果。 - **移动设备适配**: 确保网页在手机和平板电脑上也能正常查看。 - **老旧浏览器兼容**: 对于一些仍然有一定市场份额的老旧浏览器...
本主题聚焦于“JQUERY插件之自定义滚动条DEMO”,这涉及到如何使用jQuery来实现一个自定义的滚动条,以替代浏览器默认样式,并确保在不同浏览器如IE、Firefox、Chrome和百度浏览器中的兼容性。 首先,我们了解滚动...