IE与Firefox的CSS兼容
CSS对浏览器器的兼容性具有很高的价值,通常情况下IE和Firefox存在很大的解析差异,这里介绍一下兼容要点。
常见兼容问题:
1.DOCTYPE
影响 CSS 处理
2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE
不行
3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是
margin-left,margin-right) 方可居中
4.FF: 设置 padding 后, div 会增加 height 和
width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width
5.FF: 支持
!important, IE 则忽略, 可用 !important 为 FF 特别设置样式
6.div 的垂直居中问题:
vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px;
然后插入文字,就垂直居中了。缺点是要控制内容不要换行
7.cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand
仅 IE 可以
8.FF: 链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。参照
menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar
中插入一个空格。
9.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法:
div{margin:30px!important;margin:28px;}
注意这两个margin的顺序一定不能写反,据阿捷的说法!important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样:
div{maring:30px;margin:28px}
重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx!important;
10.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不支持,如果有人理解的话,请告诉我一声,谢了!:)
11.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义
ul{margin:0;padding:0;}
就能解决大部分问题
注意事项:
1、float的div一定要闭合。
例如:(其中floatA、floatB的属性已经设置为float:left;)
<#
相关文档:
1,无图片纯css圆角框
收录理由:兼容性强,不用图形
图一
特点:
1.不用任何图形,使用很多个div容器模拟出圆角效果。
2.兼容性:通杀所有浏览器
缺点:
1.构造这个圆角需要加入太多的无语义的标签,结构比较冗余。
2.重用性不强:如果一个页面有多个圆角,并且要实现不同的半径大小,则其灵活性不够。
3.边框颜 ......
转载于 罗马集市
Magento的CSS文件一般存放到 $MAGENTO_INSTALLED_FOLDER/skin/{frontend | admin |
install}/<package name>/<theme
name>/css目录下。也有些和全局js脚本配合使用的css文件存放在$MAGENTO_INSTALLED_FOLDER/js下,但是一
般我们不直接调用它们。
那么Magento应用又是如何引用CSS文件的呢 ......
下面是CSS最常用和实用的技巧。
1.重置浏览器的字体大小
重置浏览器的默认值 ,然后重设浏览器
的字体大小你可以使用雅虎的用户界面重置
的CSS方案 ,如果你不想下载9MB的文件,代码如下:
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,
blockquote,th,td ......
jQuery插件: jquery.widget.shadowbox.js
/**
* 一个简单的设置DIV阴影的插件
*
* 功能:
* 1. 根据阴影宽度自动调整外层容器宽度,以及透明度
* 2. 可定义ShadowBox的宽度和高度
* 3. 可用CSS样式表定义可视化样式
*
* @author joe.he <developerworks@163.com>
* @copyright irgs.cn
*/
(fun ......
1.一个很好的Appfuse学习论坛:http://n4.nabble.com/AppFuse-f547863.html
2.Appfuse CSS的开发https://appfuse-css.dev.java.net/
3.CSS样式的查看,CSS Framework Themes: http://css.appfuse.org/themes/
4.CSS 样式的下载http://issues.appfuse.org/browse/CSS-13
个人感觉比较好的两个CSS style
http://css.appfu ......