css Hack

CSS hack方式一览 前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况。基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现。我个人是不太推荐使用hack的,要知道一名好的前端,要尽可能不使用hack的情况下实现需求,做到较好的用户体验。可是啊,现实太残酷,浏览器厂商之间历史遗留的问题让我们在目标需求下不得不向hack妥协,虽然这只是个别情况。今天,结合自己的经验和理解,做了几个demo把IE6~IE10和其他标准浏览器的CSS hack做一个总结,也许本文应该是目前最全 阅读详情

概念

CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号
以达到应用不同的CSS样式的目的
一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack
CSS Hack常见的有三种形式:属性Hack、选择符Hack、条件注释Hack, Hack主要针对IE浏览器

条件Hack
条件注释只有在IE浏览器下才能执行,这个代码在非IE浏览下被当做注释视而不见。可以通过IE条件注释载入不同的CSSJSHTML和服务器代码等。
// 只有在IE浏览器中才能被解析,在其他的浏览器中就会被当成注释
<!--[if IE]>
    <p>你在非IE中将看不到我的身影</p>
<![endif]-->

<!--[if IE]>
<style>
    .test{color:red;}
</style>
<![endif]-->
属性Hack
比如IE6能识别下划线“_”和星号“*”,IE7能识别星号"*",但不能识别下划线"_",而firefox两个都不能认识
.test{ color:#090\09; 	/* IE8往上 */ 
*color:#f00; 			/* IE7 */ 
_color:#ff0; 			/* IE6  */ }
选择符Hack
比如IE6能识别 *html .class{}IE7能识别*+html .class{}
* html .test{color:#090;} /* IE6 */
*+html .test{color:#ff0;} /* IE7 */
.test{color:#f00;} 		  /* IE8+往上 */
CSS hack 1、什么是CSS hack? CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的,CSS hack就是让你记住这个标准),以达到应用不同的CSS样式的目的,比如.kwstu{width:300px;_width:200px;},一般浏览器会先给元素使用width:300px;的样式,紧接着后面还有个_width:200p... 阅读详情

相关推荐

史上最全的CSS hack方式一览

前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况。基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现。我个人是不太推荐使用hack的,要知道一名好的前端,要尽可能不使用hack的情况下实现需求,做到较好的用户体验。可是啊,现实太残酷,浏览器厂商之间历史遗留的问题让我们在目标需求下不得不向hack妥协,虽然这只是个别情况。今天,结合自己...

923723914 2359

CSS Hack是什么意思?css hack有什么用?

第一部分:什么是CSS HackCSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的,CSS hack就是让你记住这个标准),以达到应用不同的CSS样式的目的。 常用的CSS hack 有三种方式,CSS 内部hack、选择器hack、HTML 头部引用,其中第一种最常用。 CSS 内部hack 正经的CSS是这么写的 <!DOCTYPE html> <html> <head&

前端小白-Mr鹏帅 2万+

[css] 什么是hackcsshack有哪些?

[css] 什么是hackcsshack有哪些? 一、总结 1、CSS hack:由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如IE6和IE7,对CSS的解析认识不完全一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。 2、hack:本意:修改,

歌谣的博客 6500

CSShack

HACK就是只有特定的浏览器才能识别这段hack代码 一般来说,CSS hack有三种表现形式: CSS属性级Hack CSS选择器级Hack IE条件级Hack CSS 属性前缀 IE6级以下版本生效 _ div{_color:red;} 该代码只在IE6及以下浏览器中才能被识别出来 仅IE6中生效 - div{-color:black;} 该样式只在 ie6 中才能被识别 ...

proxy_的博客 9761

css什么是hack,CSS hack 合集

本来已经抛弃IE6|7|8了,可是最近发现要考虑IE兼容性的网站还是有不少的,所以这两天了解了一下CSS HACK,在这里简单地总结一下!1、何为HACK?简单的说,HACK就是只有特定浏览器才能识别这段hack代码。Hack也可以说是让前端最为头疼的问题,因为要写N多种兼容代码。当然,IE是最让人蛋疼的。一般来说,CSS HACK有3种表现形式:CSS属性前缀法::比如 IE6能识别下划线"_"...

weixin_29328371的博客 7833

什么事css+hack,css hack的理解

什么是CSS hack由于不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持、解析不一样,导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时,我们为了获得统一的页面效果,就需要针对不同的浏览器或不同版本写特定的CSS样式,我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程,叫做CSS hack!...

weixin_34725044的博客 2191

css hack原理以及常用hack

CSS hack 是一种在网页开发中常用的技术,用于解决不同浏览器之间的兼容性问题。由于不同浏览器对 CSS 的解析和渲染可能存在差异,开发者需要使用一些特殊的技巧来确保网页在各种浏览器中都能正常显示。

温暖前端的博客 2万+

CSS-HACK

HACK(CSS Hack 实际上指的就是一个特殊的代码,这段代码只在某些特殊的浏览器中可以识别)

主营前端方向,技术栈是vue 1526

css什么是hack,CSShack是什么意思

CSS中的hack就是针对不同的浏览器和版本来写不同的CSS样式,使其能呈现出我们想要的页面效果CSS hack主要是用来解决浏览器的兼容问题,能够针对不同的浏览器去写不同的CSS,而且还能在不同的浏览器中得到想要的页面效果,今天将在文章中为大家具体介绍什么是hack【推荐课程:CSS教程】hack的定义:hack就是由于不同厂商的浏览器,如Internet Explorer,Firefox,Ch...

weixin_34005394的博客 4783

CSS Hack

利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。

KrystalQ的博客 551

CSS Hack常见的有三种形式:CSS属性HackCSS选择符Hack以及IE条件注释Hack

css样式的时候,恐怕最头疼的就是各个浏览器下的兼容性问题,即css hack,不同的浏览器对css的解析结果是不同的,因此会导致相同的css输出的页面效果不同,这就需要css hack来解决浏览器局部的兼容性问题。使用csshack将会使用你的css代码部分失去作用,然后借助条件样式,使用其原css代码在一些浏览器解析,而css hack代码在符合条件要求的浏览器中替代原css那部分代码。...

web前端基础入门教程 1548

CSS Hack 技巧

IE Hack IE系列浏览器的hack大略如下: _nowamagic:1px;———–ie6 *nowamagic:1px;———–ie7 nowamagic:1px\0;———-ie89 nowamagic:1px\9\0;——–ie9 :root nowamagic:1px; —-ie9(实际情况可能ie9还是有问题,再用这种方式) 其中粉红色部分...

abc2346789的博客 7591

css hack

CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如IE6和IE7,对CSS的解析认识不完全一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要...

极客神殿 608

你知道CSS Hack吗?

什么是CSS Hack? 一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。 IE浏览器Hack一般又分为三种,条件Hack、属性级Hack、选择符Hack(详细参考CSS文档:css文档)。 例如: // 1、条件Hack <!--[if IE]> <style> .test{color:red;} </style> <![endif]> // 2、属性Hack .test{ color:#090\9; / For IE8+ /

田兴的博客 3237

csshack是什么

首先,先把前辈的文章放在看得见的位置,以示尊重:https://www.cnblogs.com/Renyi-Fan/p/9006084.html#_label0 总结 1、CSS hack:由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如IE6和IE7,对C...

aosutai1509的博客 163

CSS Hack的介绍

文章目录前言一、CSS Hack是什么?二、CSS hack分类三、选择器的优先级 前言 一、CSS Hack是什么? 一般来说是针对不同的浏览器写不同的CSS样式,我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程,叫做CSS hackCSS Hack常见的有三种形式: 属性Hack、选择符Hack、条件注释HackHack主要针对IE浏览器 二、CSS hack分类 CSS Hack大致有3种表现形式,CSS属性前缀法、选择器前缀法以及IE条件注释法(即HTML头部引用i.

m0_64969829的博客 342
上一篇: 常见的页面布局(两栏布局、三栏布局)
下一篇: src与href的区别
芋圆味糖罐
博客等级 码龄5年 24粉丝 · 88原创
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值