标签为: "css hack" 的文章

Opera Chrome Safari浏览器的CSS Hack方法

之前写过一篇文章《主流浏览器的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;                         /* IE8 */
}

注意：

1、下面的一行是一整体，后边的会覆盖前边的

 [background: #ff00ff; background: #ff00ff;

2、下面的这一行针对IE8，而且数字必须是0，以前用9，但是用9，IE7和IE6也识别

background: #00ff00\0;

特此记录一下~

2009年12月21日  断桥残雪
3  条评论
CSS, 网络技术

主流浏览器的CSS Hack方法整理

由于不同的浏览器，比如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两个都不能认识。
阅读更多…

2009年12月17日  断桥残雪
3  条评论
CSS, 网络技术

使用if IE hack注释解决CSS以及JS的兼容问题

在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做一下详细的解释：
阅读更多…

2009年12月16日  断桥残雪
2  条评论
CSS, JavaScript, 网络技术 ,

使用CSS控制打印页面格式

之前做地图打印页面的时候，经理要求打印时候把打印的按钮去掉。这个时候就用到了控制打印的样式表了。
<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进行处理的~特此记录一下

2009年12月1日  断桥残雪
1  条评论
CSS

chrome字体最小值12px问题及解决方法

昨天我修改自己的WordPress天气插件的时候，发现一个比较有趣的问题：chrome竟然最小的字体是12px，而小于12px的数值，百分比之类的都不起左右，都是显示12px。
对于这个问题，我上google搜索了半天也没有结果，本来因为是css出现了问题，测试了好多次都不行，于是最后来了个style=”font-size:10px”都没有显示成功，之后我写了一段代码在本地测试，还是不行，问了同事，同事都是表示不知道。
后来是怀疑自己的html声明写错了，可是更换了标准声明还是不行，至今还是表示疑惑，找到了客户端设置chrome的方法，而没有css hack的方法没有找到，希望高手给个css hack解决的方法。
WordPress天气预报插件地址：http://www.js8.in/mywork/weather
demo地址：http://www.js8.in/mywork/weather/demo.php?city=0532
火狐下正常显示11px，布局正确 chrome下顶部日期显示的是12px

解决方法

阅读更多…

2009年11月19日  断桥残雪
12  条评论
网络技术 , ,