169it科技资讯


当前位置:  编程技术>WEB前端

CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chrome、Opera

    来源: 互联网  发布时间:2014-10-07

现在的浏览器IE6-IE10、Firefox、Chrome、Opera、Safari。。。数量众多,可谓百家争鸣,对用户来说有了很多的可选择型,不过这可就苦了Web前端开发人员了。
今天把一些常用的CSS Hack整理了一下,包括常用的IE hack以及火狐、Chrome、Opera浏览器的Hack,并把这些CSS Hack综合的一起,写了一个小的浏览器测试器。如图所示:

下面就来看一下代码吧:

html部分:

代码如下:

<div >
    <div ></div>
    <div >
        <p>IE6下背景颜色:<span >#ccc</span></p>
        <p>IE7下背景颜色:<span >#666</span></p>
        <p>IE8下背景颜色:<span >#06f</span></p>
        <p>IE9下背景颜色:<span >#f00</span></p>
        <p>IE10下背景颜色:<span >#0ff</span></p>
        <p>webkit,Safari,Chrome下背景颜色:<span >#ff0</span></p>
        <p>FireFox下背景颜色:<span >#f0f</span></p>
        <p>Opera下背景颜色:<span >#0f0</span></p>
    </div>
</div>

CSS部分,此部分就只贴Hack部分的代码吧,布局的就不贴了:

代码如下:

.content .test {
    width: 200px;
    height: 200px;
    background: #f60; /*all*/
    background: #06f9; /*IE*/
    *background: #666; /*IE6,7*/
    _background: #ccc; /*IE6*/
}

/* webkit and opera */
@media all and (min-width:0){
    .content .test {
        background: #0f0;
    }
}

/* webkit */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .content .test {
        background: #ff0;
    }
}

/*FireFox*/
@-moz-document url-prefix() {
    .content .test {
        background: #f0f;
    }
}

/*IE9+*/
@media all and (min-width:0) {
    .content .test{
        background: #f009;
        }
}

/*IE10+*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .content .test {
        background: #0ff;
    }
}

css-hack-ms-moz-webkit-o-Jb51.net.rar


    
相关技术文章:
    ▪ie6,ie7,ie8完美支持position:fixed的终极解决方案

     ie6对position:fixed不支持,网上有很多解决方法,有的在ie6,ie7上调试成功后,在ie8上又不好使,div层还是跟随滚动条浮 动;以下总结方法,在ie6,ie7,ie8上都调试成功,且页面滚动条滚动时,效果还挺好,div层并不会闪烁。 代码如下:<div id="goTop_div" class="fixed ie">  </div> css: 代码如下:.fixed{         position:fixed; /*对于火狐等其他浏览器需要设置的*/         top:700px;  /*同上*/         width:30px;        ......


    ▪小技巧处理div内容溢出

     前几天遇到一个问题,代码是这样一个层次: 代码如下:<div class="province">    <ul>        <li>1</li>        <li>2</li>        <li>3</li>    </ul></div> 我设置了div的边框, 要想ul的内容在边框内, 必须设置div高度。 但是,ul内的内容是变化的,内容少的时候就不及div的高度。 不设高度的时候,ul的内容就出现在边框外了。 原来需要设置ul的边框。想想也是,先设置与他关系最近的元素吧。 ......


    ▪html小技巧之td,div标签里内容不换行

     在一些页面开发中,除自己操作外,引起换行的情况一般有: Ex一.td标签里内容长度过长引起换行; Ex二.div标签(或其他标记)里内容有文本和图片引起换行; 解决方法:   针对例子一用<nobr></nobr>标签把换行的内容全部包起来,可以解决问题;   针对例子二用CSS样式white-space: nowrap;可以使图片和内容不换行,(经自己测试使用<nobr></nobr>标签也可以). ......


 
最新技术文章:
    ▪css white-space:nowrap属性用法(可以强制文字不换行输出)

     强制不换行,直接使用white-space:nowrap即可。CSS设置不转行: overflow:hidden 隐藏 white-space:normal 默认 pre 换行和其他空白字符都将受到保护 nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象例:强制不换行 代码如下: div{white-space:nowrap;} ......


    ▪IE里button设置border:none属性无效解决方法

     某个元素设置无边框,只需要给元素设置border:none即可,当然设置border:0效果一样,但实际上两者是有性能差别的 代码如下:border:none:边框设置为为none,不做任何处理;border:0:边框宽度设置为0像素,但是实际上border-color和border-style还是在渲染的。然而在IE中,对于button和input元素确并不是这样,在IE6,7中border:none仅等价于border-style:none,而边框所占的空间还是在的。这导致了调input的宽度和高度在各个浏览器中不统一!在IE6,7中,虽然设置了border:none后,边框仍存在。不信你试一试。下面给......


    ▪border:none与border:0使用区别

     一、border:noneborder-style的简写在chrome审查元素看到以下结果 代码如下:element.style {border: none;border-top-style: none;border-right-style: none;border-bottom-style: none;border-left-style: none;border-width: initial;border-color: initial;}在firefox中用firebug查看元素会看到以下结果: 代码如下:element.style {    border: medium none;}注意这个medium值二、border:0border-width的简写在chrome审查元素看到以下结果......


 


站内导航:


特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

©2012-2017,169IT.COM,E-mail:www_169it_com#163.com(请将#改为@)

浙ICP备11055608号