CSS3 Gradients

十月 16th, 2011   -   CSS   -   746 views   -   3 comments

CSS3-Gradients

HTML5 CSS3 必将是以后的前端的发展方向，

特别是在移动端，高端浏览器给攻城师们带来的愉悦无以言表。

偶然在 webkit 官网上看到一篇关于 CSS3 Gradients（渐变）的文章，

感觉非常不错，于是利用空余时间将其中的实例部分翻译了下，

本人 E 文不太好，有些是照按自己理解翻译，希望对大家学习有帮助吧！

附上原文地址：http://www.webkit.org/blog/1424/css3-gradients/

Read More >

IE下块元素实现 display:inline-block

七月 31st, 2010   -   CSS   -   2,587 views   -   3 comments

display:inline-block

将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。

目前支持的浏览器有：IE8、Firefox3、Opera、Safari

方案一：

先定义 display:inline-block 触发 layout ，再将 display 设回 block 或 inline，layout 不会消失，

两个 display 要先后放在两个 CSS 中声明才会有效果，这是 IE 的一个经典 BUG 。

  1. .inline-block {   
  2.     display:inline-block; /* 触发块元素的 layout */  
  3. }   
  4.   
  5. .inline-block {   
  6.     display:inline; /* 让块元素呈递为内联对象 */  
  7. }  

方案二：（推荐方案）

  1. .inline-block {   
  2.     display:inline; /* 让块元素呈递为内联对象 */  
  3.     zoom:1; /* 触发块元素的 layout */  
  4. }  

IE6行高(line-height)失效

七月 31st, 2010   -   CSS   -   2,174 views   -   1 comment

当一个容器里的文字与img、input、textarea、select、object等元素相连时，

对这个容器设置的line-height数值就会失效，同时以上元素的行高可能×2，

受影响的浏览器：IE 5.01 / IE 5.5 / IE 6.0

解决方法是对与文字相连接的img、input、textarea、select、object等元素加以属性，代码如下：

  1. .line-height {   
  2.     margin:/* (所属line-height-自身img,input,select,object高度)/2px 0 */;   
  3.     vertical-align:middle;   
  4. }  

纯CSS实现未知尺寸图片垂直居中

七月 31st, 2010   -   CSS   -   1,781 views   -   0 comments

淘宝UED前端招聘中有这样一道题目：

使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。

下面是一个权衡的相对结构干净，CSS简单的解决方法：

  1. .cssbox{   
  2.     /* 非IE内核浏览器识别垂直居中 */  
  3.     display:table-cell;   
  4.     vertical-align:middle;   
  5.        
  6.     /* IE内核浏览器识别垂直居中 */  
  7.     *display:block;   
  8.     *font-size:175px; /* 约为高度的0.873，200*0.873 约为175 */  
  9.   
  10.     text-align:center;   
  11.     width:200px;   
  12.     height:200px;   
  13. }   
  14.   
  15. .cssbox img{   
  16.     vertical-align:middle;   
  17. }  

12