CSS技巧和问题整理

2014.01.02/2014.05.19发布于笔记暂无评论/目录

整理日常使用CSS时遇到的问题和技巧。

CSS技巧

word-wprap研究

word-wrap: break-word;
word-break

\9 hack

参考stackoverflow上的一个回答CSS \9 in width property\9取代;行结束符的规则表示仅对IE7, IE8和IE9有效。

transition

css3的过渡特效,比如,当鼠标位于超链接上时,将超链接的颜色由蓝色逐渐变为红色:

a {
    color: blue;
    transition: color 0.5s ease;
}

a:hover {
    color: read;
}

详细的讲解和跨浏览器问题可参考transition

CSS问题

#1

使用百分数定义width的div,其position变为static之后,宽度发生突变。具体问题见这里。原因是position变为fixed后,div会从文档流中脱离出去,解决方法是给div定义具体的width,不要用inherit和百分比等相对值。

#2

具有display: table-row的元素无法设置margin。具体问题见这里

问题的原因在http://www.w3.org/TR/CSS2/tables.html#height-layout有介绍,简单的说(引用stackoverflow上的回答),就是:

When you use display:table-row, the height of the DIV is solely determined by the height of the table-cell elements in it. Thus, margin, padding, and height on those elements have no effect.

解决办法是为table-cell设置height,参考了某个论坛上的一个帖子

阅读资料

  1. css2: tables
  2. Position: fixed changes width of element when using percentages
  3. How to add padding & margin to LI elements with display:table-row?
  4. CSS table layout - why does table-row not accept a margin?
#css#problem#trick

评论