随笔分类 - Css
Css
摘要：做前端多年，虽然不是经常需要hack，但是我们经常会遇到各浏览器表现不一致的情况。基于此，某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现。我个人是不太推荐使用hack的，要知道一名好的前端，要尽可能不使用hack的情况下实现需求，做到较好的用户体验。可是啊，现实太残酷，浏览器...
阅读全文
摘要：浮层使用fixed定位会在IE6下滚动时出现闪烁的现象*html{ background-image:url(about:blank); background-attachment:fixed;}
阅读全文
摘要：目前有有关此文章的介绍（这里），但是只是部分内容。本文为全文翻译，并提供其他的一些页面性能优化方面的资源，希望能对reflow的进一步认识有所帮助。我之前还翻译过一篇关于reflow的文章，您有兴趣可以看看（点击这里）。原文地址：http://www.stubbornella.org/content/2009/03/27/reflows…-slow/原作者：Nicole Sullivan翻译：张鑫旭 以下为翻译全文，以”zxx:”打头的灰色文字是译者，也就是我的一些旁白了。//正文开始关于回流(reflows)与重绘(repaints)，我已经在twitter和delicious上发布，但是并
阅读全文
摘要：对于JavaScript的框架已经很熟悉了，像jQuery, Ext, Dojo，最近又发现有很多的CSS Framework，转载一篇相关的文章。大多数的Web设计者大都听说过“CSS Framework”， 相信一些人已经开始尝试使用过其中的一些了。CSS就像其他的编程语言和脚本语言一样，在日常的编写过程中有很多的重复代码，这些重复代码也可以被整合在一起，从而减少重复劳动，使工作变的更简单。使用CSS Framework， 可能会减少你的开发时间和提高效率，另一方面，如果选择了错误的框架反而会增加额外的工作量和工作时间。现在有很多开源的CSS Framework，使用google便可以轻松
阅读全文
摘要：使用div+css布局的好处不用多说，经常性地会使用到float，那么清除浮动就是必须要做的，而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一。常用的清除浮动的方法有以下三种。此为未清除浮动源代码，运行代码无法查看到父级元素浅黄色背景。 1 <style type="text/css"> 2 <!-- 3 *{margin:0;padding:0;} 4 body{font:36px bold; color:#F00; text-align:center;} 5 #layout{background:#FF9;} 6 #left{fl
阅读全文
摘要：IE6的末日即将来临，但这个末日也并非朝日可至,所以我们还是争取最后的胜利，用各种hack和方法来规避IE6下双边距，背景透明，重复文字等等一堆bug。10个修复IE6下bug技巧IE6的末日即将来临，对我们前端开发人员来说,无疑是一个慰藉人心的喜讯。但这个末日也并非朝日可至,所以我们还是争取最后的胜利,用各种hack和方法来规避IE6下双边距,背景透明,重复文字等等一堆bug.下面是转载自前端观察中的10个修复IE6下bug技巧:1.使用DOCTYPE你应该在一直每个HTML文件的头部都使用DOCTYPE，并且我们推荐使用strict版本，比如：<!DOCTYPEHTMLPUBLIC&
阅读全文
摘要：IE捉迷藏bug（peek-a-boo），之所以起这个名称是因为在某些条件下文本看起来消失了，只有在重新装载页面时才再度出现。出现这个bug的条件是：一个浮动元素后而跟着一些非浮动元素，然后是一个清理元素，所有这些元素都包含在一个设置了背景颜色或图像的你元素中。假如清理元素砬到了浮动元素，那么中间的非浮支元素看起来消失了，隐到了父元素的背景颜色或图像后面，只有在刷新页面时才重新出现。 幸运的是，有许多方法可以解决这个bug。最轻易的方法可能是去掉父元素上的背景颜色或图像。但是，这经常是不可行的。另一个方法是避免清理元素与浮动元素接触。假如窗口元素应用了特定的尺寸，那么这个bug似乎就不会...
阅读全文
摘要：PNG图像格式介绍：PNG是20世纪90年代中期开始开发的图像文件存储格式，其目的是企图替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。流式 网络图形格式(Portable Network Graphic Format，PNG)名称来源于非官方的“PNG’s Not GIF”，是一种位图文件(bitmap file)存储格式，读成“ping”。PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可 存储多到16位的α通道数据。IE6下PNG背景透明的显示问题PNG格式比起GIF来表现色彩更丰富，特别是表现渐变以及背景透
阅读全文
摘要：2011-05-17 22:15 20人阅读 评论(0) 收藏 编辑 删除CSS3 Pie使用CSS3 Pie可以让IE6至IE8版本实现大多数的CSS3修饰特性，如圆角、阴影、渐变等等。→ 访问CSS3 PieCSS3 Builder使用这款工具可以制作出漂亮的CSS3盒子，像是Photoshop制作出来的效果。→ 访问CSS3 BuilderCSS3 Drop shadow generator一款很棒的阴影效果生成工具，自动生成相应的代码。→ 访问CSS3 Drop shadow generatorCascader这是一个帮助开发者从HTML代码中分离出内联样式的工具。→ 访问Cascad
阅读全文
摘要：所有PC使用者所熟知的那個桌面上網藍色小圖示：IE，一直是一個落伍過時的網路瀏覽器。我們大概可以試想一下：如果沒有IE6，我們現在可能正享用著十年後我們才享用得到的網路進化成果。沒錯，IE6拖累了整個網路世界的進化，而且遺毒難清。但，很多人並不在意這些，就像他們也不在意投票給哪個落伍過時的人，選他當市長或總統也好那樣。「很多人並不在意」慢慢地變成了阻礙進步的反作用力，而不在意「很多人並不在意」而繼續求新求變的Web designer，顯然長久以來都是網路世界裡的反動份子。這些反動份子不時獲得網路俠義軍火商的情義贊助，免費提供各種足以在落伍過時的IE上展現顛覆奇蹟的奇技淫巧或神兵利器。這些奇技淫
阅读全文
摘要：通常来说，CSS非常简单。但是当浏览器厂商开始实现CSS3特性，问题开始变得有些复杂了。不难，只是有些复杂。这可能包括两个方面：首先有些心得CSS3属性(比如，transition、渐变、transform等)不是那么简单，其次我们不得不使用浏览器厂商指定扩展。直到你最喜欢用的IDE原生支持CSS3，你最好的伙伴将是CSS3生成器、手册、参考指南以及基于JS的方案。这正是本文要推荐的，这里将收集能够助你学习和使用CSS3的真正有用的工具。生成器CSS3 Please!跨浏览器的CSS规则生成器，支持：border-radius、box-shadow、渐变(线性)、rgba色彩、transfor
阅读全文
摘要：你只需要下载Robert Nyman的DOMAssistant脚本和ie-css3.js并将它们在你的页面的head标签中导入，如下：<head> <script type="text/javascript" src="DOMAssistantCompressed-2.7.4.js"></script> <script type="text/javascript" src="ie-css3.js"></script> </head> 支持的选择
阅读全文
摘要：一、下载您可以狠狠地点击这里：ie-css3.htc，这个玩意儿是让IE浏览器支持CSS3表现的关键东东。二、上面的是什么东西首先说说.htc文件，.htc文件是个脚本文件，我个人以为与js文件属于同一货色，只是呢，貌似htc是Internet Explorer(IE)的私生子，只有IE才认它。htc文件可以用来描述web行为，web行为允许程序员把自定义的功能“连接”到现有的元素和控件，而不是必须让用户下载二进制文件（例如ActiveX 控件）来完成这个功能。Stop! 别叉远了，点到为止，如果您对htc文件感兴趣，可以参见这里。本文的这个ie-css3.htc文件看看名字，看看长相就知道是
阅读全文
摘要：做过前台设置的都知道css存在两种盒模型，W3C标准的方框模型和IE浏览器的方框模型。除IE以外的大多数浏览器只支持W3C方框模型。IE浏览器能够根据页面的呈现模式的定义而是用对性的方框模式。已用哪中呈现的模式取决于页面上的DOCTYPE的声明。如果页面包含有效的DOCTYPE声明，则以严格模式呈现。 如果页面没有DOCTYPE声明或没有有效的DOCTYPE声明，则以兼容模式呈现。 下面将一个两种模式的区别，两种呈现模式的主要差别是对元素width和height样式的计算上。如下面的样式 复制代码 代码如下:{ width:180px; height:72px; padding:1...
阅读全文
摘要：由于历史的原因，各个浏览器在对页面的渲染上存在差异，甚至同一浏览器在不同版本中，对页面的渲染也不同。在W3C标准出台以前，浏览器在对页面的渲染上没有统一规范，产生了差异(Quirks mode或者称为Compatibility Mode)；由于W3C标准的推出，浏览器渲染页面有了统一的标准(CSScompat或称为Strict mode也有叫做Standars mode)，这就是二者最简单的区别。 W3C标准推出以后，浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，很多页面都是根据旧的渲染方法编写的，如果用的标准来渲染，将导致页面显示异常。为保持浏览器渲
阅读全文
摘要：float是网页布局中都要使用的css属性，他为我们灵活布局提供了方便，但同时浮动太多会带来很多麻烦，所以我通常的做法是使用float完后，马上清除他。float的本质是脱离的正常的html文档流，就是由于他脱离的文档流才出现了很多麻烦。清除浮动（我更喜欢叫闭合浮动元素）的最简单的方法就用<div style=”clear:both;”></div>加入空的标签，但是这种不够语义化，也显得不是很灵活，每次都要加额外的html。于是有人就想到css里面有一个：after的，这样就不需要加入额外的html了，完全由css完成，于是就有了下面这段比较经典的css代码：.cle
阅读全文
摘要：hasLayout 是IE特有的一个属性。很多的ie下的css bug都与其息息相关。在ie中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。当一个元素的 hasLayout属性值为true时，它负责对自己和可能的子孙元素进行尺寸计算和定位。虽然这意味着这个元素需要花更多的代价来维护自身和里面的内 容，而不是依赖于祖先元素来完成这些工作。下列元素默认 hasLayout=true ：<table> <td> <body> <img> <hr> <input> <select&g
阅读全文
摘要：在IE中，有一个很重要的概念，这个概念，对 IE 中页面元素的布局有影响。这就是 hasLayout。可能很多人都不知道它的存在吧，但是它却偷偷的做了那么多坏事。虽然如此，MSDN 中涉及到 hasLayout 这个 MS 属性的地方寥寥无几，而具体解释 layout 和 IE 渲染模型之间关系的则少之又少。hasLayout 就是一把双刃剑，对 IE 的布局很重要，而同时，在 IE 中引起了很多 bug，比如浮动双边距bug等。它是很多兼容性问题的罪魁祸首。IE专有的LayouthasLayout的字面意思是 “拥有布局”。在说明 hasLayout 之前，需要先说明一个跟它相关的概念--”
阅读全文
摘要：我们知道IE6是不支持透明的PNG的,这无疑限制了网页设计的发挥空间.然而整个互联网上解决这个IE6的透明PNG的方案也是多不胜数,从使用IE特有的滤镜或是expression,再到javascript+透明GIF替代.但是这些方法都有一个缺点,就是不支持CSS中backgrond-position与background-repeat.而我今天介绍DD_belatedPNG,只需要一个理由,就是它支持backgrond-position与background-repeat.这是其他js插件不具备的.同时DD_belatedPNG还支持a:hover属性,以及<img>.
阅读全文
摘要：首先感谢“丸子”提供的这个IE8的css hack；关注过IE8的css hack的人相信大家都在使用这个hack，就是“/9”的css hack：.test{color:#000000; /* FF,OP支持 */color:#0000FF/9; /* 所有IE浏览器(ie6+)支持 ；但是IE8不能识别“*”和“_”的css hack；所以我们可以这样写hack */[color:#000000;color:#00FF00; /* SF,CH支持 */*color:#FFFF00; /* IE7支持 */_color:#FF0000; /* IE6支持 */}包括我自己也是使用这种的，这是
阅读全文
