css hack小小总结-css教程-PHP中文网

css hack小小总结

高洛峰

发布： 2016-11-24 13:57:17

原创

1968人浏览过

css hack是指各个浏览器及其版本对css解析后生成效果差异。

css hack主要解决浏览器有IE6、IE7、IE8、chrome、Firefox、Safari、Opera，其他浏览器就

不用解决了，一般都是基于上面内核的，而且使用比例比较少。

对于IE浏览器：

<style> p{ width:400px; height:400px; background-color:red; background-color:blue\9;      /*所有IE*/ background-color:yellow\0;  /*IE8 hack*/ _background-color:#CDCDCD; /* ie 6*/ *+html background-color:white; /*仅IE7*/ *background-color:pink;  /*IE6 IE7 hack*/ @background-color:white;  /*opera hack*/ } </style><p>php点点通-关注php开发，提供专业php教程</p><p>对于Firefox:</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><p><br></p><pre class="prettyprint linenums bush:css" lang="css">*:lang(lang) selector { property:value !important; } <br><p>用伪类lang(语言)再加上!important进行定义的话,目前只有Firefox可以识别.</p><p>对于Safari:</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/2073">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680176528330.png" alt="稿定AI文案">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/2073">稿定AI文案</a>
                            <p>小红书笔记、公众号、周报总结、视频脚本等智能文案生成平台</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="稿定AI文案">
                                <span>220</span>
                            </div>
                        </div>
                        <a href="/ai/2073" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="稿定AI文案">
                        </a>
                    </div>
                <p><br></p><pre class="prettyprint linenums bush:css" lang="css">selector:empty { property:value !important; }<br><p>用伪类empty再加上!important进行定义的话,目前只有Safari可以识别.</p><p>对于Opera:</p><p><br></p><pre class="prettyprint linenums bush:css" lang="css">@media all and (min-width: 0px){ selector { property:value; } }<br><p>利用特殊继承法进行定义的话,目前只有Opera可以识别.</p><p>最后附上一张css hack表格：</p><p><a title="css.jpg" href="http://www.php.cn/"></a></p><p><img src="https://img.php.cn//upload/image/972/225/120/1479967004396142.jpg" title="1479967004396142.jpg" alt="0.jpg"></p><p>css.jpg" /></p>

登录后复制