万峰’s Blog » Css http://www.ue360.net To live only once...but with hope（尽管人生只有一次...却要活得充满希望） Thu, 27 May 2010 00:24:52 +0000 http://wordpress.org/?v=2.8.3 en hourly 1 浏览器专属 CSS Hack:区分 Firefox / Opera / Safari / Internet Explorer http://www.ue360.net/2010/05/css-hack/ http://www.ue360.net/2010/05/css-hack/#comments Thu, 27 May 2010 00:24:52 +0000 Kelvin http://www.ue360.net/?p=240 阅读全文——共548字]]>
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="gb2312" />
  5. <title>CSS Browser Hacks</title>
  6. <style>
  7. body p {
  8.     display: none;
  9. }
  10. /* Opera */
  11. html:first-child #opera {
  12.     display: block;
  13. }
  14. /* IE 7 */
  15. html > body #ie7 {
  16.     *display: block;
  17. }
  18. /* IE 6 */
  19. body #ie6 {
  20.     _display: block;
  21. }
  22. /* Firefox 1 - 2 */
  23. body:empty #firefox12 {
  24.     display: block;
  25. }
  26. /* Firefox */
  27. @-moz-document url-prefix() {
  28.     #firefox {
  29.         display: block;
  30.     }
  31. }
  32. /* Safari */
  33. @media screen and (-webkit-min-device-pixel-ratio:0) {
  34.     #safari {
  35.         display: block;
  36.     }
  37. }
  38. /* Opera */
  39. @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
  40.     head~body #opera {
  41.         display: block;
  42.     }
  43. }
  44. </style>
  45. </head>
  46.  
  47. <body>
  48. <p id="opera">我来自 Opera 7.2 - 9.5</p>
  49. <p id="safari">我是神奇的 Safari</p>
  50. <p id="firefox">我来自 Firefox</p>
  51. <p id="firefox12">我是你爷爷 Firefox 1 - 2 </p>
  52. <p id="ie7">我是囧 IE 7</p>
  53. <p id="ie6">我是脑瘸 IE 6</p>
  54. </body>
  55. </html>
]]> http://www.ue360.net/2010/05/css-hack/feed/ 1 Css3 新特性 http://www.ue360.net/2010/05/css3/ http://www.ue360.net/2010/05/css3/#comments Tue, 18 May 2010 01:57:46 +0000 Kelvin http://www.ue360.net/?p=235 阅读全文——共665字]]> CSS3发布有一段时间了，其中的新功能也是大家很期待的，但到什么时间才能广泛应用，这不是个技术问题，而是人们什么时候可以彻底放弃那些不符合 W3C 标准的旧阅读器的问题。虽然IE这些不符合标准的浏览器还在统领中国浏览器市场，但相信有一天，终究会被取代，因为社会是向前发展的。下边列表一些css3的新功能，相信你一定会感兴趣的。

  • 圆角 这个功能已经在诸如 Mozilla, Webkit 等阅读器广泛运用，对 Web 设计者来说无疑是最受期待的，然而 IE 仍然没有要支持这个功能的迹象。
  • 多背景 这个功能是我最期待的，但向后兼容会是一个很大的疑问。
  • @font-face Firefox 的最新版本将支持该功能，Safari，Opera 甚至 IE 也将支持或已经支持该功能，我们会看到该功能的广泛使用，只是字体的版权疑问会很麻烦。
  • 动画与渐变 Webkit 在这方面是领头军，动画也是设计的一部分，也该属于 CSS。这些会慢慢实现，当 Webkit 之外的阅读器也开始支持这个功能，我们会看到很多令人惊讶的效果。
  • 渐变色 定义一个固定色背景很基本，但渐变色就没有那么基本了，渐变色很适合通过代码实现，Webkit 又在这方面抢了先。
  • Box 阴影 阴影也是一种渐变色，以往是通过背景图片实现的，如果考虑到多方向的阴影，事情会变得更复杂，Box 阴影机制让一切疑问迎刃而解。
  • RGBa – 加入透明色 RGBa 中的 a 代表透明色，透明对设计者来说非常主要，目前除了 IE，这一功能正在被广泛采用。
  • 文字阴影 也属于渐变色的概念，让文字拥有阴影，以前甚至不能通过图片背景实现，因此这将为设计者带来前所未有的方便。
]]> http://www.ue360.net/2010/05/css3/feed/ 0 IE6 CSS bug: position:relative元素被overflow:auto/scroll元素包含 http://www.ue360.net/2010/03/ie6-css-bug/ http://www.ue360.net/2010/03/ie6-css-bug/#comments Tue, 16 Mar 2010 00:46:25 +0000 Kelvin http://www.ue360.net/?p=229 阅读全文——共279字]]> BUG描述：

页面中某div使用了position:relative，结合top=-25px等元素定位。在FF和IE7下表现正常，但是在IE6中该div会随鼠标滚动而滚动。

分析：

这是IE6一个已知的BUG：当某position:relative元素被带有overflow:auto/scroll属性的块级元素包含时，会表现出postion:absolute的行为。

解决方法：

  • 为包含块元素添加属性position:relative。
  • 把该元素的position:relative属性去掉，使用默认的static定位，并通过margin-top等属性实现类似的效果。
]]> http://www.ue360.net/2010/03/ie6-css-bug/feed/ 1 精品阅读 http://www.ue360.net/2010/01/reader/ http://www.ue360.net/2010/01/reader/#comments Fri, 15 Jan 2010 04:03:59 +0000 Kelvin http://www.ue360.net/?p=211 阅读全文——共828字]]> 1、标准模式中的 IE 6&7 width 100% bug

http://www.99css.com/2009/07/ie-6-width-100-bug.html

2、漫画：混乱的标记语言XHTML2/HTML5

http://www.pjhome.net/article/Web/xhtml2_html5.htm

3、样式命名规则

http://www.cssforest.org/blog/index.php?id=143

4、CSS2.0 w3c官方文档中文翻译（chm版本）

http://yy.mylovings.net/2009/07/29/140

5、CSS Sprite 的细节优化

http://lifesinger.org/blog/2009/07/css-sprite-performance/

6、5步让你的CSS样式表成功减肥

http://blog.bingo929.com/optimizing-css-tutorial-div-css.html

7、提升你设计水平的CSS3新技术

http://blog.bingo929.com/div-css-web-design-to-next-level-with-css3.html

8、精通CSS 第1部分：造型设计元素

http://www.smashingmagazine.com/2009/08/03/mastering-css-styling-design-elements/

9、精通CSS 第2部分：先进的技术和工具

http://www.smashingmagazine.com/2009/08/10/mastering-css-advanced-techniques-and-tools/

10、10个非常有用的网站设计和开发资源 (out of gfw)

http://woork.blogspot.com/2009/08/10-useful-resources-for-web-designers.html

更多精品阅读

]]> http://www.ue360.net/2010/01/reader/feed/ 0 图片垂直居中的使用技巧（转自怿飞’s Blog） http://www.ue360.net/2009/05/img_vertical_center_solution/ http://www.ue360.net/2009/05/img_vertical_center_solution/#comments Mon, 11 May 2009 07:55:50 +0000 Kelvin http://www.ue360.net/?p=177 阅读全文——共446字]]> <div class="box"><img src="http://pics.taobao.com/bao/album/promotion/taoscars_180×95_071112_sr.jpg" /></div>

  1. .box {
  2. /*非IE的主流浏览器识别的垂直居中的方法*/
  3. display: table-cell;
  4. vertical-align:middle;
  5. /*设置水平居中*/
  6. text-align:center;
  7. /* 针对IE的Hack */
  8. *display: block;
  9. *font-size: 175px;/*约为高度的0.873，200*0.873 约为175*/
  10. *font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/
  11. width:200px;
  12. height:200px;
  13. border: 1px solid #eee;
  14. }
  15. .box img {
  16. /*设置图片垂直居中*/
  17. vertical-align:middle;
  18. }
]]> http://www.ue360.net/2009/05/img_vertical_center_solution/feed/ 0 详解CSS的优先权（转自怿飞’s Blog） http://www.ue360.net/2009/05/specificity/ http://www.ue360.net/2009/05/specificity/#comments Mon, 11 May 2009 06:40:08 +0000 Kelvin http://www.ue360.net/?p=175 阅读全文——共972字]]> 发现很多朋友对 CSS 的优先权不甚了解，规则很简单。需要说明的一点，如果你的样式管理需要深层判断 CSS 的优先权，更应反思自己的 CSS 代码，是否合理？是否优化？

CSS2.1 中规定了关于 CSS 规则 Specificity（特异性）的计算方式，用一个四位的数字串（注：CSS2 中是用三位）来表示，最后以 Specificity 的高低判断 CSS 的优先权。

Specificity 具体的计算规则：

  • 元素的 style 样式属性，加 1,0,0,0。
  • 每个 ID 选择符（#id），加 0,1,0,0。
  • 每个 class 选择符（.class）、每个属性选择符（例 [attr=""] ）、每个伪类（例 :hover），加 0,0,1,0。
  • 每个元素或伪元素（例 :firstchild）等，加 0,0,0,1。
  • 其他选择符（例 全局选择符 *，子选择符 >），加 0,0,0,0。

最后逐位相加数字串，得到最终的 Specificity 值，按照从左到右的顺序逐位比较。

除了 Specificity 还有一些其他规则：

  • !important 声明的规则高于一切，如果 !important 声明冲突，则比较优先权。
  • 如果优先权一样，则按源码中“后来者居上”的原则。
  • 由继承而得到的样式属性不参与 specificity 的计算，低于一切其他规则（例 全局选择符 * ）。

范例分析：

  1. h1 {color: red;}
  2. /* 只有一个普通元素加成，结果是 0,0,0,1 */
  3. body h1 {color: green;}
  4. /* 两个普通元素加成，结果是 0,0,0,2 */
  5. /*0,0,0,1 小于 0,0,0,2 ，后者胜出*/
  6. h2.grape {color: purple;}
  7. /* 一个普通元素、一个class选择符加成，结果是 0,0,1,1*/
  8. h2 {color: silver;}
  9. /*一个普通元素，结果是 0,0,0,1 */
  10. /*0,0,1,1 大于 0,0,0,1 ，前者胜出*/
  11. html > body table tr[id=”totals”] td ul > li {color: maroon;}
  12. /* 7个普通元素、一个属性选择符、两个其他选择符（子选择符 >），结果是0,0,1,7 */
  13. li#answer {color: navy;}
  14. /* 一个ID选择符，一个普通选择符，结果是0,1,0,1 */
  15. /*0,0,1,7 小于 0,1,0,1，后者胜出*/
]]> http://www.ue360.net/2009/05/specificity/feed/ 0