之前写过一篇文章《主流浏览器的CSS Hack方法整理》，其中提到了Opera Chrome Safari等浏览器的CSS hack的方法，可是对于有的版本的浏览器是不兼容的，如下面的代码
以下代码是支持Chrome、opera、safari的hack方法，不过我没有使用过，是从网上找到的：
@media all and (min-width:0px){
.wyq { background: #000; } /* Opera、Safari 、Chrome */
}
测试一下，不行~后来在老大的指导下找到了一个解决的方法，代码如下：
Opera Chrome Safari浏览器的CSS Hack方法：
body:nth-of-type(1) .brower
{
/*background: #00f; 这是专门针对Chrome和Safari的CSS hack */
}
.brower
{
background: #f00; /* ff */
background: #00ff00\0; /* IE8 */
[background: #ff00ff; background: #000; /* Safari Chrome */
*background: #ff6600; /* IE7 */
_background: #ffff00; /* IE6 */
}注意：
1、下面的一行是一整体，后边的会覆盖前边的
[background: #ff00ff; background: #ff00ff;
2、下面的这一行针对IE8，而且数字必须是0，以前用9，但是用9，IE7和IE6也识别
background: #00ff00\0;
特此记录一下~
由于不同的浏览器，比如IE6、IE7、Firefox等，对CSS的解析不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。我在写WordPress天气预报插件的时候就碰见了一个CSS hack的问题：在IE6下不能显示正常。本来一个很好的WordPress天气预报插件就因为IE6给推迟了发布时间。所以对于前端开发人员CSS兼容性是个比较棘手的问题，当然对于不同浏览器也有不同的CSS hack的方法，此处本人就整理了一些常用到CSS hack方法，分享给大家，希望对大家有用。
CSS Hack浏览器的顺序
对于不同浏览器的CSS hack是有顺序区分的，一般的书写hack的顺序是：Firefox -> IE7 -> IE6 -> 其他，
当然推荐大家使用Firefox+Firebug来进行调试，注意书写的时候要尽量标准，记住封口，很多时候不封口在FF，IE7下显示正常，可是在IE6下就全部乱了~
CSS Hack整理汇总
这些方法相信很多人已经很熟悉了：比如 IE6能识别下划线”_“和星号” * “，IE7能识别星号” * “，但不能识别下划线”_“，而firefox两个都不能认识。
继续阅读全文……
在IE CSS hack(更多方法)当中常用到if IE 来判断浏览器的类型，解决CSS甚至于JS的兼容性问题，之前大家可能知道if IE来解决CSS的兼容性问题，其实if IE不仅仅是用于CSS hack的使用，我们在前端开发中甚至可以使用if IE来做JS的处理，如下面的代码：
<!–[if IE 5]> <script>document.write(”仅IE5.0与IE5.5可以识别”);</script> <![endif]–>
<!–[if gte IE 5.0]><script>document.write(”IE5.0以及IE5.0以上版本都可以识别”);</script><![endif]–>
<!–[if IE 6]><script>document.write(”仅IE6可识别”);</script><![endif]–>
<!–[if lt IE 6]><script>document.write(”IE6以下版本可识别”);</script><![endif]–>
<!–[if gte IE 6]><script>document.write(”IE6以及IE6以上版本可识别”);</script><![endif]–>
<!–[if IE 7]><script>document.write(”仅IE7可识别”);</script> <![endif]–>
<!–[if lt IE 7]><script>document.write(”IE7以下版本可识别”);</script><![endif]–>
<!–[if gte IE 7]><script>document.write(”IE7以及IE7以上版本可识别”);</script><![endif]–>
下面对if IE做一下详细的解释：
继续阅读全文……
之前做地图打印页面的时候，经理要求打印时候把打印的按钮去掉。这个时候就用到了控制打印的样式表了。
<link rel=”stylesheet” type=”text/css” media=”print” href=”print.css” />
正因为xhtml和css是分离的，所以我们可以在print.css里自由书写需要打印显示的内容和表现形式。那么这也要求我们在书写xhtml的时候更多考虑到打印显示效果的需求，良好的扩展标记和结构嵌套，使得我们轻松的使用display:none将内容设置为不显示。然后就是去书写 print.css内容的时候了，你象设置word一样去写你想打印的页面吧。
后来想了想，其实单独写一个css增加了请求次数，就想到了@media print{}的作用，代码如下
@media print{
.printdesc
{
right: 0;
width: 685px;
height: 69px;
background-color: #FFFFFF;
float:left;
overflow:auto;
border:0px;
}
.text{
float:right;
width: 688px;
margin-top:20px;
}
.printlink{
height:0px;
display:none;
width:0px;
z-index:-10;
}
.printlink a{
display:none;
}
}后来想到如果打印页面的某一部分，可以使用iframe来进行操作，现在的打印页面的局部内容基本上就是使用iframe进行处理的~特此记录一下
昨天我修改自己的WordPress天气插件的时候，发现一个比较有趣的问题：chrome竟然最小的字体是12px，而小于12px的数值，百分比之类的都不起左右，都是显示12px。
对于这个问题，我上google搜索了半天也没有结果，本来因为是css出现了问题，测试了好多次都不行，于是最后来了个style=”font-size:10px”都没有显示成功，之后我写了一段代码在本地测试，还是不行，问了同事，同事都是表示不知道。
后来是怀疑自己的html声明写错了，可是更换了标准声明还是不行，至今还是表示疑惑，找到了客户端设置chrome的方法，而没有css hack的方法没有找到，希望高手给个css hack解决的方法。
WordPress天气预报插件地址：http://js8.in/mywork/weather
demo地址：http://js8.in/mywork/weather/demo.php?city=0532
解决方法
继续阅读全文……