《我的css收藏和心得》由会员分享，可在线阅读，更多相关《我的css收藏和心得（33页珍藏版）》请在金锄头文库上搜索。
1、css 解决兼容的问题解决兼容的问题1；float 的闭合的闭合在 float 元素间增加一个标记这个样式定义为：这个样式定义为：.clear clear:both; 2：最好的：最好的 div 居中方法居中方法.someStyle width:xpx;margin:xpx auto; 3：strong 标签重写的好处标签重写的好处对于特定的内容，如果要进行强调，又需要设置自己的样式，可以不必另行定义 div，而用 strong 标签的重写。 例如如下的 HTML 代码：我是强调的内容，我是普通的内容对应的 CSS 文件如下： #somePart strong font-weight:norm
2、al; color:#f00; 4：IE 的的 display:inline;当 box 为 float 时，IE 下面会使得 margin 加倍。真是莫名其妙IE6 页没有解决这个问 题。 解决方法是 float 后续标签闭合（见前） ，并且给 float 的 box 赋以“display:inline;”的属性， 至于这该死的 display:inline 是什么意思，5：另外一个：另外一个 IE 的的 sbbug当 Windows 样式主题为 XP 样式时，所有的按钮不能定义 background-image，只能定义 background，也就是说 #regb . background
3、:url(images/reg/login.gif) no-repeat; . 可以，然而 #regb . background-image:url(images/reg/login.gif) no-repeat; . 就不行了！ 唉！不过加上 background-color:transparent;之后就好了！6：换行打破：换行打破 float 的问题的问题假设布局 A|B div B 标浮在 A 的右侧，这时候如果不设定 B 的宽度，则 B 很可能由于内容过多而撑破大 的布局，跑到 A 的下面，形成 A B 的局面。 因此一定要注意设置 B 的宽度。7：IE 与与 FF 对宽度的理解不同
4、对宽度的理解不同在 IE 中，如果子元素宽度超标，会自动“撑破”母元素，而 FF 不会，所以常用 FF 调试 的时候，一定要确保子元素 width 小于母元素。 不管是 IE 还是 FF, border 都是跟 padding 走的。而 width 则在 IE 和 FF 有不同的理解，准 确地说，border 会跟 width+padding 走！ 8、关于高度的问题、关于高度的问题如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内 容，高度最好定好。 （似乎有时候不会自动往下撑开，不知道具体怎么回事）9、最狠的手段、最狠的手段 - !important;如果实在没
5、有办法解决一些细节问题,可以用这个方法.FF 对于!important 会自动优先解析, 然而 IE 则会忽略.如下 .tabd1 background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */ 10、margin 加倍的问题。加倍的问题。设置为 float 的 div 在 ie 下设置的 margin 会加倍。这是一个 ie6 都存
6、在的 bug。 解决方案是在这个 div 里面加上 display:inline; 例如：相应的 css 为 #IamFloat float:left;margin:5px;/*IE 下理解为 10px*/display:inline;/*IE 下再理解为 5px*/ 11、float 的的 div 一定要闭合。一定要闭合。例如：(其中 floatA、floatB 的属性已经设置为 float:left;)这里的 NOTfloatC 并不希望继续平移，而是希望往下排。 这段代码在 IE 中毫无问题，问题出在 FF。原因是 NOTfloatC 并非 float 标签，必须将 float 标签闭合
7、。 在之间加上 aw 提醒您：这个 div 一定要注意声明位置，一定要放在最恰当的地方，而且必须与两个具 有 float 属性的 div 同级，之间不能存在嵌套关系，否则会产生异常。 并且将 clear 这种样式定义为为如下即可： .clear clear:both; 此外，为了让高度能自动适应，要在 wrapper 里面加上 overflow:hidden; 当包含 float 的 box 的时候，高度自动适应在 IE 下无效，这时候应该触发 IE 的 layout 私有 属性(万恶的 IE 啊！)用 zoom:1;可以做到，这样就达到了兼容。 例如我的某一个 wrapper 如下定义： .
8、colwrapper overflow:hidden;zoom:1;margin:5px auto; onhavinglayout-绝对不得错过，每一个制作 CSS 以及用脚本操作 DOM 的人都不得错过！12：position 属性其实是指本体对上级的定位。属性其实是指本体对上级的定位。默认的属性值都是 static，静态。就不用多说了。最关键的是 relative（相对）以及 absolute（绝对） 。 往往我们如果是 COPY 别人的代码，会把 absolute 属性与 left、top 配合起来制作相关的 “悬浮层”效果。然而有时候我们需要针对某一个容器的悬浮效果，而不是针对窗口的。
9、 这时候通过高度、宽度的计算不但麻烦，而且几乎无法完美实现效果。我一开始也无能为 力，后来发现只要把其上一级的样式属性 position 设置为 relative 就可以了。 也就是说，position 的属性值的效果，直接受其容器样式中 position 属性值影响。 例如如下 A-B 的嵌套结构当 A 的 position 为 relative 时，B 的 position 为 absolute 才有效。这时候 left:0、top:0 就不 再针对窗口文档，而是针对 id 为 A 的这个 div 了。这样在开发一些基于 B/S 应用程序的时候，就能很方便的添加一些 UI 元素，例如某一个
10、 活动层的关闭按钮等。 13：关于：关于 list-style 失效的问题失效的问题列表 无论是列表本身(ol, ul) 还是单个的列表元素(li)，拥有 layout 后都会影响列表的表现。不 同版本 IE 的表现又有不同。最明显的效果就体现在列表符号上(如果你的列表自定义了列 表符号则不会受这个问题影响)。这些符号很可能是通过某种内部机制附到列表元素上的 (通常是附着在它们外面)。不幸的是，由于是通过“内部机制”添加的，我们无法访问它 们也无法修正它们的错误表现。 最明显的效果有： 列表获得 layout 后，列表符号会消失或者被放置在不同的或者错误的位置。有时它们又可以通过改变列表元素的
11、边距而重新出现。这看起来似乎是以下事实导致的结 果：layout 元素会试图裁掉超出其边界的内部内容。 列表元素获得 layout 之后，会有和上面一样的问题出现，更多参考 (extra vertical space between list items)http:/www.brunildo.org/test/IEWlispace.php进一步又有一个问题就是(在有序列表中)任何具有 layout 的列表元素似乎都有自己独立的 计数器。比如我们有一个含五个列表元素的有序列表，只有第三个列表元素有 layout。我 们会看到这样： 1 2 1 4 5 此外，如果一个有 layout 的列表元素跨
12、行显示时，列表符号会底部对齐(而不是按照预料 的顶部对齐)。 以上某些问题还是无法解决的，所以如果需要列表符号的时候最好避免让列表和列表元素 获得 layout。如果需要限定尺寸，最好给别的元素设定尺寸，比如给整个列表外面套一个 元素并设定它的宽度，又或者比如给每个列表元素中的内容设定高度等等。 另一个 IE 中列表的常见问题出现在当某个 li 中的内容是一个 display: block 的锚点 (anchor)时。在这种情况下，列表元素之间的空格将不会被忽略而且通常会显示成额外的一 行夹在每个 li 之间。一种避免这种竖直方向多余空白的解决方法是赋予这些锚点 layout。这样还有一个好处
13、就是可以让整个锚点的矩形区域都可以响应鼠标点击。 解决方案-用 js 动态写入 li 序列. -_-14：我个人概括的图片存放规则：我个人概括的图片存放规则一、非语义图片(就是指那些表现样式的图片)存放于 styles/images 下 二、样式图片尽量在 CSS 中体现，可以用 background+text-indent 来配合完成，对于非块元 素，用 display:block 使得 text-indent 属性生效关于 strong 标签重写的好处 对于特定的内容，如果要进行强调，又需要设置自己的样式，可以不必另行定义 div，而用 strong 标签的重写。 例如如下的 HTML 代
14、码：我是强调的内容，我是普通的内容对应的 CSS 文件如下： #somePart strong font-weight:normal; color:#f0R 这种方法从语义上来说是非常利于 SEO 的。FF 和和 IE 的的 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 会增加 h
15、eight 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式，值得注意的是，一定要将 xxxx !important 这句放置在另一句之上6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个 DIV 一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行7.cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅
16、IE 可以8.FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。9.在 mozilla firefox 和 IE 中的 BOX 模型解释不一致导致相差 2px 解决方法：divmargin:30px!important;margin:28px; 注意这两个 margin 的顺序一定不能写反，据阿捷的说法!important 这个属性 IE 不能识别， 但别的浏览器可以识别。所以在 IE 下其实解释成这样：divmaring:30px;margin:28px 重复定义的话按照最后一个来执行，所以不可以只写 margin:XXpx!important;10.IE5 和 IE6 的 BOX 解释不一致IE5 下 divwidth:300px;margin:0
