css 的 bug 的其他应用

　　在过去的几年里，CSS 经历了一场巨变，正如 JavaScript 在 2004 年前后所经历的那场革命。它从一门极度简单/功能有限的样式语言，发展成为一项由 80 多项 W3C 规范（含草案）所定义的复杂技术，并建立起了独有的开发者生态圈/专属的技术会议/专用的框架和工具链。CSS 已经如此壮大，以致于一个普通人已经无法把它完整地装进自己的头脑了。甚至在 W3C 专门定义这门语言的工作组中，也没人敢说自己是精通 CSS 所有方面的专家，甚至连接近这个程度都非常困难。实际上，大多数工作组成员只专注 CSS 的某个特定细节，可能对其他部分知之甚少。

—— 《CSS 揭秘》

谁还敢说我就是个布局的...

说这种话的人最可恶了，他们不会懂的兼容的辛苦，不会了解定位布局和浮动布局的优劣，并不清楚各种样式 bug 的由来...

更别提各种层叠和复用的小技巧。

好吧，情绪宣泄完毕，说正事：

主要是那些看上去是 bug，但又有点小用的东西。

虽然大伙都不提倡使用 position: fixed，但又不可否认它确实是个好用的玩意儿，人懒起来的时候直接用它特别清爽。

而比较麻烦的是它没法像 absolute 一样在 relative 中有相对定位功能。

那么其实我们可以使用 transform 与 fixed 这个 bug。

时间： 2024-08-09 23:54:31

css 的 bug 的其他应用的相关文章

IE6常见CSS解析Bug及hack

IE6常见CSS解析Bug及hack ###### 1)图片间隙描述:在div,dl,li中插入图片时,图片会将盒子下方撑大3px~5px(设置高度后依旧被撑大) ??? hack1:将</div>与<img/>写在一行上(针对div): ??? hack2:将<img/>转为块状元素,添加声明:display:block;(都有效) ??? hack3:给父元素添加:font-size:0,需要给子元素单独添加font-size;(都有效) ??? hack4:给父

[ 打败 IE 的葵花宝典 ] IE6中css常见BUG全集及解决方案

IE6双倍边距bug 当页面内有多个连续浮动时,如本页的图标列表是采用左浮动,此时设置li的左侧margin值时,在最左侧呈现双倍情况.如外边距设置为10px, 而左侧则呈现出20px,解决它的方法是在浮动元素上加上display:inline;的样式,这样就可避免双倍边距bug. 3像素问题及解决办法当使用float浮动容器后,在IE6下会产生3px的空隙,有意思的是右侧容器没设置高度时3px在右侧容器内部,当设定高度后又跑到容器的左侧了,所以对布局精度要求高的话,请参考例29.31的解决方

IE浏览器兼容 css之bug 问题

bug的几种常见原因: 1.盒模型bug 原因:没有正确声明doctype(如果没有声明doctype,各浏览器对代码的解析有不同的规范).解决方法:使用严格的doctype声明. 2.各浏览器对不同标签的初始值不同(如字体.字体大小.li的边框和小黑点都不一样) 解决方法:利用css初始化. 3.自身书写不规范(如IE的3像素bug,一般是由于第一个div设置浮动,后面的div没有设置导致的)解决方法:书写规范,后面的元素一般要做清理浮动. 4.双倍margin 原因:浏览器

浏览器中CSS的BUG

对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声明. 其它请参考:CSS hack 针对IE6,IE7,firefox显示不同效果 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不要换行. 2. margin加倍的问题设置为float的div在ie下设

各种主流浏览器CSS、BUG兼容

1.div的垂直居中问题 vertical-align:middle;将行距增加到和整个DIV一样高 line-height:200px;然后插入文字,就垂直居中了.缺点是要控制内容不要换行.--------------------------------------------------------------------------------------------------------------------------------------2. margin加倍的问题设置为flo

[ 打败 IE 的葵花宝典 ] IE中css的Bug分析及解决方案参考手册

作为一名前端,我们通常要做的就是让页面在各系统A-Grade浏览器,甚至网站浏览份额0.1%以上的浏览器上良好显示.当然,还有性能问题.不过,今天要说的是样式的兼容问题.在IE/Mozilla/Webkit/Opera四分天下的今天,IE6-9/Mozilla(Gecko)系列/Chrome/Safari/Opera etc. 这些浏览器的兼容,无不让前端们头痛.而在这之中,最让人头痛的当数IE,特别是IE6.搞定了IE6,基本也就能称霸半个江山了.搞定了IE,也相当于占领了7.80%的领地.你

css中bug记录

1.margin塌陷,通俗叫法. 假如一个盒子box里边嵌套了两个盒子(记为box1,box2).box1的margin-top不会如预想的一样在box顶部撑开一个边距,而是以包含box的容器上边界为基准撑开边距. 解决方法:一.设置box1 padding-top. 二.设置box display:absolute. 三.设置box overflow:hidden.

CSS选择器优先级【转】

样式的优先级多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 一般情况下,优先级如下: (外部样式)External style sheet <(内部样式)Internal style sheet <(内联样式)Inline style 有个例外的情况,就是如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式. 示例如下: <head> <style type="text/css&

[ css 权重 !important ] 使用CSS的!important讲解及实例演示

/** 楔子: !important是CSS1就定义的语法,作用是提高指定样式规则的应用优先权(参见:W3.org的解释). 语法格式{ sRule!important },直接写在定义的最后面,如: p{color:green !important;} 注意:IE一直都不支持这个语法,而其他的浏览器都支持.因此我们就可以利用这一点来分别给FF和IE浏览器样式定义. <html> <head> <style type="text/css"> #box