深山老林

日志内容

2007-08-22[原]由text-indent引起的问题

今天在做东西的时候不小心发现了由于定义了text-indent而引起的宽度问题，主要是定义了首页行缩进后宽度受影响。于是去群里问了一下，还是有收获的。豆豆猫提供了一个例子《IE显示宽度和高度的问题》，主要是说li奇、偶数时显示不同的问题，虽然他只是觉得这个Demo很奇怪，但后来我发现这个例子中的问题也是由于text-indent引起的，所以在这里也感谢豆豆猫，让我少走了不少路。

OK，相信大家也很想知道到底text-indent会引出什么bug，注意哦，在IE中才会出现。正常的情况下，定义首行缩进应该是不影响到宽度的，但从上面那个例子里可以看到，偶数列样例2（IE6下）的宽是比其它列要宽的。

问题很简单，我们以样例5为最终效果，让偶数列和奇数列两边的效果一样，重新做一次就知道了。具体看这里，看完你应该已经知道，text-indent会引起的问题还大的，因为我们还没有很好对付它的办法。所以，当遇到这种问题时，最好还是使用padding吧，至少还有解决方案。-_-||

风的影子 @ 13:35 | 看个仔细 | 有话要说 0 | 引用 0 | 编辑

2007-07-12[原]清除浮动最简单的方法

TAG：CSS 原创兼容性

在CSS森林（30247792）群里讨论一个margin的问题中无意间发现overflow也可以用来清除浮动，嘿嘿，这个方法不单使用简单，而且FF、OP、IE7都支持，从此可以告别那又长兼容性又差的FF清浮动的方法了。

方法真的很简单，只要为需要清浮动的标签加上overflow这个属性。

====================CSS=========================
ul{list-style:none;height:auto;margin:0;padding:0;background-color:#436973;} li{float:left;width:80px;height:80px;background-color:#83B1DF;} .demo{clear:both;border:1px solid #FF00FF;margin-bottom:5px;} .overflow{overflow:auto;zoom:1;background-color:#43FF73;}
===============================================

====================HTML=======================
<div class="demo"> <ul class="overflow"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div> <div class="demo"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div>
===============================================
其中zoom是为了IE6准备的。

完整的Demo

注：忘了一个很重要的内容，并不是所有的overflow属性都可起来一样的效果，比如visible属性就只能对IE起作用。例子可以看这里Demo2
这样的话就有一个问题啦，如果要有高度，而且内容超出高度的时候，定义auto或hidden都可能会有一些不想要的效果出现。这里提供一个解决方案：对于IE6及以下版本的IE，可以直接定义高度；对于IE7、FF、OP，可定义min-height。====================CSS=========================
.overflow{height:auto;_height:200px;min-height:200px;overflow:auto;zoom:1;_overflow:visible;}
===============================================

风的影子 @ 23:32 | 看个仔细 | 有话要说 0 | 引用 0 | 编辑

2006-04-24[原]用属性选择符来解决IE跟FF的兼容性问题

TAG：CSS 兼容性原创

从之前写过的《[原]属性选择符的使用》中发现了一个可以用来解决IE跟FF兼容性的问题，因为IE不支持CSS的属性选择符。下面来看看可以怎么做：

---------------------------HTML-------------------------------------
<div class="left">
<dl>
   <dd>dd1</dd>
   <dd>dd2</dd>
   <dd>dd3</dd>
</dl>
</div>
<div class="right">
<dl>
   <dd>dd4</dd>
   <dd>dd5</dd>
   <dd>dd6</dd>
</dl>
</div>
--------------------------------------------------------------------

---------------------------CSS-------------------------------------
/*IE*/
div{width:200px;height:300px;float:left;}
.left{color:Aqua;}
.right{color:Fuchsia;}

/*FF*/
div[class=left]{color:Blue;}
div[class=right]{color:Gray;}
--------------------------------------------------------------------

从上面的例子可以看到，在IE中二个层里的文字颜色跟在FF中的文字颜色是不一样的，也就是说可以使用属性选择符来来写针对FF的样式。

可能你会说用!important声明提高样式的优先级不就完了吗，用属性选择符来为FF写样式意义不大。使用!important声明的确是比较方便，但IE6也认识这个声明，也就是说如果你给FF写了!important声明，那就得再为IE写一个样式来还原默认值，才能让IE6也显示正常。使用属性选择符就不会有这样的问题，而且可以将多个定义写到一起，是不是比较方便呢？看看下面的样式：

---------------------------使用声明----------------------------------
div.try{
width:200px !important;
   width:204px;
height:300px !important;
   height:304px;
   padding:2px;
}
--------------------------------------------------------------------

---------------------------使用属性选择符----------------------------
div.try{
   width:204px;
   height:304px;
   padding:2px;
}
div[class=try]{
   width:200px;
   height:300px;
}
--------------------------------------------------------------------

这里的属性选择符最好不要使用ID为属性。在《[原] CSS样式的优先级补遗2》及《[原]属性选择符的优先级》中我们了解到，ID选择符的特性值为100，而属性选择符的特性值为11，即不能达到将样式定义分开的目的。

风的影子 @ 11:39 | 看个仔细 | 有话要说 2 | 引用 0 | 编辑