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阶段，设计稿就先不透露了，估计过段时间可以放个图出来解释一下。

IE6、7下position和zindex的一个bug

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

今天做demo遇到了一个很让人困扰的问题。
页面的头部有一个搜索框，里面有一个表示浮出层的div。

<div class="grandfather">
    <div class="father">
        <div class="popup">
        </div>
    </div>
    <div class="uncle">
         <div class="uncle-popup">
         </div>
    </div>
</div>

基本就是上面的类似的html结构，为了达到浮层不被别的层遮盖的目的
我设定了一下css

    .father {
                position:relative;
                z-index:4;
                width:400px;
                height:400px;
                background:#CCC;
                margin-bottom:-300px;
            }
    .popup {
                position:absolute;
                z-index:100;
                width:100px;
                height:200px;
                background:#999;
    }

可是没想到这样的样式在IE6下面居然被下面的元素给挡住了。
demo如下：地址http://lab.zipeng.info/ie6-position-zindex.html
查其原因，原来是uncle的div里面的元素也有z-index属性，虽然z-index的值比popup的值要小。但还是挡住了father里面的popup(这是关键)。

最后查阅了资料，发现ie67下面要对比两个不同级别的元素的z-index要逐级的向父元素查找。如果父元素没有可比性，那么后面的元素会无视前面的元素的z-index强行覆盖。所以这在IE67下面是要注意。
解决方式也很简单，给父元素加上z-index使他们具有可比性。
哎，在这个IE6走向灭亡的年代才发现这样的问题真是不应该啊~~~

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奉上~~~

欢迎大家提供更多方案。

CSS伪类&&伪元素-由项目问题引发小总结

作者：kun10 发布时间：May 22, 2010 分类：CSS

开始前先问一句：现在让你说说css伪类你能说出几样？你又常用过哪几种伪类？


说句实话，自己学习css的时候很粗心，对于伪类真的了解不多，最多知道的就是:hover，还知道在ie6下面hover只对a元素有效。于是乎觉得它功能很弱小，一直没有什么关注。
直至自己最近做项目时候遇到一个需求，要对段落第一个字母的样式进行单独控制（很常见的段落首字加粗或加大的那种效果），由于不熟悉伪类，接到需求自己很快的就敲定了一个html结构。

<p><span>这</span>是一段话</p>

通过span元素把第一个字从段落中分离出来，然后单独的定义样式。
这样的确是一种解法，但是这样的段落对于后期的维护不太有利，特别是要有一个不太懂html的人来维护这段话，很容易忽略掉span标签的作用。对于后台来说，对文本数据做处理又麻烦了一步。
很凑巧，今天逛了王卓同学的blog，发现他的文章以及回复留言处都是做成首字大写加粗变色的样子，很好奇，于是忍不住按了F12。
发现他的html中没有加过span，整段文字成一段，这样对于维护成本确实是减少不少。
那他这里是怎么实现的呢？其实很简单，使用了css伪元素:first-letter。

.paragraph:first-letter{
....
}

这样子，段落文本本身不需要使用任何的标签单独的隔离出来。
在此我突然想把伪类和伪元素总结一下，于是看了看w3school上面。我也自己再过一遍。

伪类及其支持情况


伪类及其支持情况

伪元素及其支持情况


伪元素及其支持情况

套用@化龙的一句话，前端做的优化要考虑到成本和代价问题，在这次这个问题上，真的得以体现了，很明显使用css伪元素大大简化了后台开发人员和维护人员的操作，把样式和内容做了分离~~~

============= 也欢迎各位提出伪类伪元素的各种小技巧 ===============

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

取消chrome输入框高光的办法

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

一直用typecho，用着用着，发现自己的系统的输入框总和高手们的有不一样，一看输入框，chrome下面带的高亮框怎么没有了。以前曾经费劲心机想去掉的。于是在系统的css文件一点点的寻找。终于在reset文件里面找到可疑的这一段

/* remember to define focus styles! */
:focus {
	outline: 0;
}

这一段就可以去掉chrome的输入框有焦点时的高光，没想到就这么简单。
----------- added on 11th Feb 2010 --------
同样的方法可以去掉超级链接的虚线外框来着,IE8, FF3+, Opera, Chrome等都支持(感谢Mac)
--------------------------------
记一记免得自己忘掉。

  1. 1