IE6 CSS :hover小tip

作者：kun10 发布时间：April 17, 2011 分类：CSS

好久不写css真的感觉手生了，这两天做项目真是发觉自己又遇到了好多的问题。
比如首次遇到了猪头bug：）

这里我主要还是想说一下用css来实现鼠标移上元素显示浮层的效果的注意点
为了要兼容ie6并尽量的使用纯css来制作。

说几点tip（话说今天调试ie6很费劲）
1、a标签要使用hover伪类就要加上href属性
2、hover伪类要在ie6下面生效，就要注意a:hover的样式和a的样式要有差异性（小马其实早有总结过）
3、a里面不能够再嵌套a标签（算是常识吧，所以在ie6下面要实现hover显示的元素上面再使用hover效果，估计没戏）

还有一些问题和具体的场景有关，由于项目还在demo阶段，设计稿就先不透露了，估计过段时间可以放个图出来解释一下。

7种css圆角方案

作者：kun10 发布时间：December 4, 2010 分类：CSS


看了北京兰梦同学的项目总结，突然觉得之前的项目中的圆角用的很悲催，
于是总结一下吧。

我列了7种圆角方案


多背景


对于一个盒子里面有多个元素用于存放圆角的图形,具体的实现形式比较自由。


滑动门


用一张背景图片+两个嵌套的标签来实现（具体的实现也比较自由）


废弃标签的绝对定位


常用的是s、b标签，往往局限于1px半径的圆角

<div class="s-abs">
<s class="tl"></s>
<s class="tr"></s>
<div id="s-abs">
</div>
<s class="bl"></s>
<s class="br"></s>
</div>

废弃标签+背景图定义两层圆角


百度知道的方案，分三层盒子

  1. 最外层用来存放圆角和里面的盒子
  2. 第二层盒子是容器的外层边框，不要设定此元素的大小，其高度由内部元素决定
  3. 第三层盒子是容器的内边框的展示，可以设定高度，或者其高度由内部元素决定
  4. 四个圆角使用一个圆圈形空心背景，设定不同的background-position，上边角dom位置放在第二层盒子的上面，下边角dom位置放在第二层盒子的下面
<div class="b-border">
<b class="tl"></b>
<b class="tr"></b>
<div id="b-border">
<div id="b-border-inner">
</div>
</div>
<b class="bl"></b>
<b class="br"></b>
</div>

纯div圆角实现的方式


没有css图片的参与

<div id="div-corner-outer">
<div class="rod1"></div>
<div class="rod2"></div>
<div class="rod3"></div>
<div class="rod4"></div>
<div id="div-corner"></div>
<div class="rod4"></div>
<div class="rod3"></div>
<div class="rod2"></div>
<div class="rod1"></div>
</div>

相对+绝对定位实现1px圆角


外层的div使用相对定位，里面的div使用绝对定位，通过宽度的不一，实现1px的圆角

<div id="border-relative">
<div id="border-abs-inner"></div>
</div>

牺牲IE 6 7 吧


使用border-radius相关属性

不多说，demo奉上~~~

欢迎大家提供更多方案。

margin-left和display的一点故事

作者：kun10 发布时间：February 12, 2010 分类：CSS

前几天qq上面突然响起了小崔急促的问好，说是问我display：inline-block是什么效果，我自己当然不常用过此属性，很严肃地告诉他，“百度一下，谷歌一下，自己再试试”。
当晚，自己做到一个行内的span标签，想给这个span标签定一个高度和宽度，想到了block，不过一想此属性一设定如果不float：left的话岂不是又要换行了。于是，又联想到某次看960.gs系统里面grid定义的时候都用到了display:inline，但是此span本身毕竟不具备div的默认属性，所以光用inline可能还是定不了高度和宽度，于是我想到了inline-block，最后果然奏效，inline-block的用途由此可见。
另一件事就是margin-left，以前经常听同事提起它，同时还会提到ie6，这厮的margin-left默认要是别人的两倍，真不好伺候，一直以来我也会常常以padding-left去代替margin-left，不过自从上次的960.gs事件之后，我决定换一种思路，因为960.gs这套系统里面的margin-left从来没有写过浏览器兼容性相关的多余代码，让我很费解，后来细看看明白了，如果给元素加一个display：inline，再定义margin-left，是可以使ie6两倍的毛病消除的。原来就是这么简单，百度了一下也发现此法早有介绍，惭愧啊惭愧~~


----- add on 2010/2/19 ------
display:block;定义后元素将能够定义高度和宽度
display:inline;定义后元素将能够被外界的text-align:center所控制，
定义display:inline-block;元素将能够具有以上两种属性
---------------------------

demo:margin-left和inline-block

  1. 1