还是昨天的单子。

制作中学到新的东西。

看上图，对于这样的一个图片列表，如果需要采用容器内部图像能水平居中，很简单，大家都知道用 text-align: center

然后如果需要垂直居中呢？

我先前的做法是在那个LI里套一个固定宽高的table，利用td的垂直居中属性完成图片的垂直居中。

然而这种方法显然是非常不标准的。

于是前段时间在网上乱逛时学到一招：

#li_con {

display:table-cell;

text-align:center;

vertical-align:middle;

}

==================悲惨分割线====================

More »

ie6对一些非常有用的css属性完全不支持。比如mini-width，无人不抱怨ie6的css兼容性问题。本文里面，介绍了10个很实但IE却不支持的CSS属性，列出这些属性并不是为了数落IE(数落也没用), 而是你了解了哪些CSS属性是IE不支持的，就更有针对性的去编写CSS和Hack了。

一、Outline
　　在调试CSS问题的时候，我常常在指定元素上添加border来精确的查看该元素会发生什么并帮助确定问题的来源。这常常是有效的，因为它可以在布 局上给我更加具体的可视性。但是如果是块级元素，这可能会发生某些错误——在任何块级元素上添加1px的边框很可能会影响到布局，它会让这个元素的宽度额 外增加2px。
　　outline 属性是完美的替代者，因为它可以在不影响文档流的情况下呈现该对象。但是IE6 和IE7 不支持 outline 属性，所以，它不能在这两个浏览器中用于调试。

二、Inherit (值)
　　在CSS开发中有很多这样的例子：通过在特定元素上设置某些样式来告诉该元素来“继承”它父级元素的所有已添加的属性，这样你就可以避免相当多的键盘输入。
　　这可以通过设置 inherit 来很容易的实现。这可能很有用。比如，当重写 background 属性的时候，常常会有很多的文字在该属性中(色彩、图片的URL地址、位置等)。所以，与其重新写这些值，你可能仅仅想要考虑中的元素和其父级元素有相同 的背景属性，一个 inherit 值就可以搞定一切——这显然大大的节省了键盘输入。
　　不幸的是， inherit 值在IE6和IE7不被支持（除了用于 direction (文字方向) 和 visibility 属性）。
　　某人说，代码就像女人的裙子——越短越好，看来IE会阻碍我们这个愿望的实现。

三、Empty-Cells
More »

不知道什么时候可以告别IE6，写CSS每次都要考虑到IE6 的HACK，前几周自己写一页，又碰到这个问题，以前写法是出现问题后就加一个display:inline;或者是加一个overflow:hidden;虽然问题可以解决，但不知道到底什么时候应该加。现在总结一些要加的情况：

总的来说这些问题都是因为float引起的，IE7还好不会有脾气，可是IE6它就不一样了。

1.如果一个选择器的子元素有float,就是设定一漂动，那么就会应该失去选择器的高度，下面有给个示例下：如
这个正常的情况：

下面这个是不正常的：

下面的是正确的代码
More »

关于一些浏览器的的Hack，我怎么老是忘，每次都要查，实在是郁闷

现在，就几句话我要写清楚！我只写关于 IE6, IE7 的hack

至于Chrome, Safari, Opera那些我就先不写了，毕竟那些出错是有点麻烦，目前也不是主流浏览器。那至于IE8，刚刚正式发布不久，从目前情况来看，显示效果和FF3好像还没发现不同，IE8以后再说了。如果你看到此文章时已经有发现问题的话，可以和我留言，我们共同研究。

1、只有IE6 和 IE7 有效的hack:

.abc{width:100px; *width:50px;} /*IE6与IE7将体现 width:50px*/

(这一条在我以前学习的教程中说是IE7特有的hack，但是我今天试验后，IE6也被影响到)

2、下面是 IE6, IE7 与 IE8, FF 的hack（其实可以和第一条放在一起）
就如我的感觉，使用IE8那么多天以来，页面显示方面更偏向于FF，而非传统的IE系列，这个原来是对付IE系列与FF系列的hack现在已经成了 IE系列与IE8和FF的hack了，呵呵，说实话，对于IE8的“叛徒”举动，我非常赞成，以后可以少很多工作量了。

.abc{width:100px; +width:50px;} /*IE6与IE7将体现 width:50px*/

3、只有IE6有效的hack

.abc{width:100px; _width:50px;} /*IE6将体现 width:50px*/

或者

.abc{ width:50px!important;      width:0;}  /*有important的必须在前面，ie6为0*/

More »