展开

关键词

CSS Hack解决IE部分属性兼容性问题

阅读目录一、Css Hack不同厂商的流或某的不同版本(如IE6-IE11,FirefoxSafariOperaChrome等),对CSS的支持、解析不一样,导致在不同的环境中呈现出不一致的页面展现效果二 、Css Hack分类 2.1.属性前缀法(即类内部Hack):如 IE6能识别下划线_和星号 * ,IE7能识别星号 * ,但不能识别下划线_,IE6~IE10都认识9 2.2.选择前缀法(即选择 Hack):针对所有IE(注:IE10+已经不再支持条件注释): , 针对IE6及以下版本: 。 这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效 2.1.属性前缀法(即类内部Hack):::?2.2.选择前缀法(即选择Hack)? 2.3.IE条件注释法(即HTML条件注释Hack)?

30720

各大 CSS Hack 收集

CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的识别不同的符号(什么样的识别什么样的符号是有标准的,CSS hack就是让你记住这个标准),以达到应用不同的CSS样式的目的, 由于各的内核不同,所以会造成一些误差就像JS一样,一个JS网页特效,在微软IE6、IE7、IE8有效果,但可能在火狐(Mozilla Firefox)谷歌无效,这样就叫做JS hack ,所以我们对于CSS来说他们来解决各对CSS解释不同所采取的区别不同制作不同的CSS样式的设置来解决这些问题就叫作CSS Hack。 2、CSS hack解决问题CSS hack用来解决有些css属性在不同中显示的效果不一样的问题,如margin属性在ie6中显示的距离会比其他中显示的距离宽2倍,也就是说margin-left 6、其他主流css hack总结1.Firefox:mozilla私有属性@-moz-document url-prefix(){ .element{color:#f1f1f1;}} Firefox2

693130
  • 广告
    关闭

    云产品限时秒杀

    云服务器1核2G首年50元,还有多款热门云产品满足您的上云需求

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    前端面试题-CSS Hack

    一、CSS Hack的概念由于不同厂商的流或某的不同版本(如IE,FirefoxSafariOperaChrome等),对CSS的支持、解析不一样,导致在不同的环境中呈现出不一致的页面展现效果 这时,我们为了获得统一的页面效果,就需要针对不同的或不同版本写特定的CSS样式。我们把针对不同的不同版本写相应的CSS code的过程,叫做CSS hack! 二、CSS Hack的原理由于不同的各版本对CSS的支持及解析结果不一样,以及CSS优先级对展现效果的影响,我们可以据此针对不同的情景来应用不同的CSS。 五、CSS Hack IE条件注释法这种方式是 IE 专有的 Hack 方式,微软官方推荐使用的 hack 方式。 ,在 CSS 选择前加上只有某些特定才能识别的前缀进行 hack。?

    24040

    CSS Hack

    这个时候,我们就需要针对不同的,去写不同CSS,让它能够同时兼容不同的,能在不同的中,也能得到我们想要的页面效果。 简单的说,CSS hack的目的就是使你的CSS代码兼容不同的。当然,我们也可以反过来利用CSS hack为不同版本的定制编写不同的CSS效果。 2.原理:由于不同的对CSS的支持和解析结果不一样,还由于CSS中的优先级关系,我们就可以根据这个来针对不同的来写不同的CSS。 IE条件Hack就比较特殊了,类似于程序语句,只能使用在HTML文件里,而不能在CSS文件中使用,并且只有在IE下才能执行,在其他下面会被当做注释视而不见。 4.注意①尽可能减少对CSS Hack的使用,Hack有风险,使用需谨慎。 ②一些CSS Hack由于存在交叉认识,所以需要通过层层覆盖的方式来实现对不同进行Hack的。

    22520

    兼容

    如何能做到兼容?1、合理化使用标签与CSS 2、使用HACK代码先说合理化使用标签与CSS。到底怎么样才是合理的呢? 2弄清楚你所用的标签默认拥有哪些属性,方便重置,并且可以知道属性的默认值是否相同3针对低版本而言,标签用的越少越好。所以尽量少用且不用新标签。再说HACK代码方式什么是CSS hack? 针对不同的写不同的CSS code的过程,就叫CSS hack,也叫写CSS hack。 其实CSS hack是一种类似作弊的手段,以欺骗的方式达到兼容的目的,是用的兼容性差异来解决的兼容性问题。这种方法快捷、简单粗暴。 因为任何下出现渲染不一致都极有可能是我们自己的结构或样式不符合W3C的某些要求,或者说违背了的某些规则而造成的,所以我们应该尽量通过结构或CSS的修改来达到各渲染一致效果,除非到了万不得已情况下

    487120

    兼容

    一、什么是兼容问题同一份代码,有的显示效果正常,有的显示不正常二、为什么会有兼容问题同一产品,版本越老 bug 越多同一产品,版本越新,功能越多。 2、browserhacks 查 Hack 的写法四、处理兼容问题的思路1、要不要做产品的角度(产品的受众、受众的比例、效果优先还是基本功能优先)成本的角度 (有无必要做某件事)2、做到什么程度让哪些支持哪些效果 IE10不再支持条件注释3、CSS hack(1)起因:由于不同厂商的(比如Internet Explorer,Safari,Mozilla Firefox,Chrome等),或者是同一厂商的的不同版本 我们需要针对不同的去写不同的CSS,让它能在不同的中也能得到我们想要的页面效果。实际项目中CSS Hack大部分是针对IE不同版本之间的表现差异而引入的。 (2)CSS hack表现形式hack(黑客)利用不同的bug,来实现的兼容问题CSS Hack大致有3种表现形式,CSS属性前缀法、选择前缀法以及IE条件注释法(即HTML头部引用if

    44852

    IE hack技术

    HTML5学堂:我们平日说的IE hack到底是什么,随着的发展,IE的hack技术也在不断的发生着变化,一起看看最新的IE hack。何为hack? 行业中存在着各类,典型的如IE、火狐、谷歌等;另外,即便同样种类的,也存在着不同的版本,如IE6、IE7……IE11等。 不同对于CSS的解析机制并不是完全相同的,因此有时会导致页面效果不同,得不到我们所需要的样式。此时,我们可以针对某种进行样式的设置,从而达到所有中显示效果的一致性。 那么,这种能够标识出不同的书写方式就是hack(或者可以说,通过hack,可以只针对某种进行样式设置)常用IE hack_width:400px; *IE6*+width:300px; *IE6

    42960

    CSS Hack技术介绍及常用的Hack技巧

    不同的对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决局部的兼容性问题。 而这个针对不同的写不同的CSS 代码的过程,就叫CSS Hack。 CSS Hack常见的有三种形式:CSS属性Hack、CSS选择符Hack以及IE条件注释HackHack主要针对IE。 比如针对所有IE:,针对IE6及以下版本:,这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都 会生效。PS:条件注释只有在IE下才能执行,这个代码在非IE下被当做注释视而不见。 二、常用的CSS Hack* CSS属性级Hack *color:red; * 所有可识别*_color:red; * 仅IE6 识别 **color:red; * IE6、IE7 识别 *+color

    34530

    CSS Hack整理

    CSS Hack是在标准CSS没办法兼容各显示效果时才会用上的补救方法,在各厂商解析CSS没有达成一致前,我们只能用这样的方法来完成这样的任务.我进行前端开发的时候,测试用的大致有: 以达到间统一. { property:value; } 在选择上运用继承法 * html selector, 这个Hack只有IE系列 (除IE7外) 可以识别. html** >body selector { property :value; } 在选择上运用继承法 html** >body selector ,这个Hack只有IE系列 (除IE7外) 可以识别. selector { property**:value; } 使用方法各式各样…补充一个CSS Hack兼容一表,基本上都有了: ?

    29480

    4种方案解决CSS兼容性问题

    为什么会有兼容性问题?还不是因为厂商太多了! CSS兼容性问题的解决思路和方案今天,不想去关注太多细节问题, 比如那个css样式需要我们去兼容,而是想讨论一下大的解决思路,主要包括4个方面,CSS样式初始化、私有属性,CSS hack CSS hack有时我们需要针对不同的或不同版本写特定的CSS样式,这种针对不同的不同版本写相应的CSS code的过程,叫做CSS hack! versionIE版本,如6、7、8IE10及以上版本已将条件注释特性移除,使用时需注意。举例 属性级hack属性hack就是在CSS样式属性名前加上一些只有特定才能识别的hack前缀。 选择符级hack是针对一些页面表现不一致或者需要特殊对待的,在CSS选择前加上一些只有某些特定才能识别的前缀进行hack

    63810

    CSS3与页面布局学习总结(八)——兼容与前端性能优化

    一、兼容1.1、概要世界上没有任何一个是一样的,同样的代码在不一样的上运行就存在兼容性问题。 1.3、市场份额(Browser Market Share)通过的市份额我们可以在处理兼容性时会更加关注市场份额高的,适当的时候可以放弃市场份额占有量小的。 不同甚至同一不同版本的默认样式是不同的。但这样会有很多兼容问题,CSSReset可以将所有默认样式设置成一样。 就是针对不同的或不同版本写特定的CSS样式达到让兼容的过程。 ; margin: 0 5px; } hack速查表 建议:以标准为准书写代码,如遇到兼容问题,尝试其他方法解决问题,在万不得已怕情况下,采用HACK解决。

    802100

    CSS兼容性的一些Hack方法

    CSS hack方式一:条件注释法这种方式是IE专有的Hack方式,微软官方推荐使用的hack方式。 举例如下 只在IE下生效 只在IE6下生效 只在IE6以上版本生效 只在IE8上不生效 非IE生效 CSS hack方式二:类内属性前缀法属性前缀法是在CSS样式属性名前加上一些只有特定才能识别的 IE各版本 CSS hack 对照表hack写法实例IE6(S)IE6(Q)IE7(S)IE7(Q)IE8(S)IE8(Q)IE9(S)IE9(Q)IE10(S)IE10(Q)**color青色YYYYNYNYNY CSS hack方式三:选择前缀法选择前缀法是针对一些页面表现不一致或者需要特殊对待的,在CSS选择前加上一些只有某些特定才能识别的前缀进行hack。 相信只要大家一起努力,少用、慎用hack,未来一定会促使厂商的标准越来越趋于统一,顺利过渡到标准的主流时代。抛弃那些陈旧的IE hack,必将减轻我们编码的复杂度,少做无用功。

    35530

    【必备】史上最全的 CSS & JS Hack 手册(转载)

    渲染页面的方式各不相同,甚至同一的不同版本(“杰出代表”是 IE)也有差异。因此,兼容成为前端开发人员的必备技能。如果有一份 Hack 手册,那查询起来就方便多了。 这篇文章就向大家分享 Browserhacks 帮我们从网络上收集的各个特定的 CSS & JavaScript Hack,记得推荐和分享啊! IE 选择 Hack* IE 6 and below ** html .selector {}.suckyie6.selector {} * .suckyie6 can be any unused class {}body:last-child .selector {}body:nth-of-type(1) .selector {}body:first-of-type .selector {}IE 属性值 Hack ; }.selector { color***: blue9; } * Everything but IE 6 *.selector { color**: blue; }IE Media Query Hack

    6210

    CSS hack总结

    有时,我们为了让一些外观在不同中做保持一致。就不得不用css hack。下面是常用的css hack。添加标识的类名做法是,用js来识别,然后在文档根节点添加类名。 对火狐做些处理 *.weblit .sth{} * 对webkit做些处理 *实现见https:github.comrafaelpcss_browser_selector条件注释条件注释的内容只会在符合条件的中显示 常见的条件注释如下 除了IE 选择hack针对某个选择hack。 } *IE10+*@mediascreenand(-ms-high-contrast:active),(-ms-high-contrast:none){#veintiun{color:red;}}属性hack 针对某个选择hack

    14920

    金三银四,那兼容你知多少?

    CSS BugCSS hackCSS中,hack是指一种兼容css在不同中正确显示的技巧方法,因为他们都属于个人对css代码的非官方的修改,或非官方的补丁。 Filter它是一种对特定的组显示或隐藏规则或声明的方法。本质上讲,filter是一种用来过滤不同hack类型。 但是ie6及更低版本会继续解析。语法:选择{_属性:属性值;}此方法是区分ie6和其他的方法 ! 内核识别,其他不识别-o- Opera识别,其他不识别-ms-ie识别,其他不识别常见的兼容问题以及解决方法1)、图片有边框bug描素:当图片加在ie上会出现边框 ,其他不识别该声明cursor属性pointer属性值ie6以上版本及其他内核都识别该声明hack:如统一某元素鼠标指针形状为手型,应添加声明cursor:pointer;11)透明属性兼容其它写法

    16930

    CSS hack兼容总结

    针对各Hack的写法:1、 Firefox@-moz-document url-prefix() { .selector { property: value; }}2、 Webkit内核( safari)@media screen and (-webkit-min-device-pixel-ratio:0) { Selector { property: value; }}3、 Opera {property:value;}9、 IE7及IE7以下版本Selector {*property: value;}10、 IE6Selector {_property**:**value 因为任何下出现渲染不一致都极有可能是我们自己的结构或样式不符合W3C的某些要求,或者说违背了的某些规则而造成的,所以我们应该尽量通过结构或CSS的修改来达到各渲染一致效果,除非到了万不得已情况下 ,才考虑CSS的Hack

    38260

    判断IE版本的语句 ...

    并且,其他非IE与IE对某些CSS解释也不一样。所以,通过IE中的专有条件注释可有针对性的进行相关属性的定义。    可使用如下代码检测当前IE的版本(注意:在非IE中是看不到效果的)        您正在使用IE                  版本 5                         严格地说是属于CSS hack。因为就好象其他真正的css hack一样,它使得我们可以给一些赋予特殊的样式,再则它不依赖于某个的BUG来控制另外一个(的样式)。 因为条件判断不依赖于某个hack,而是一个经过深思熟虑的特色功能,所以我相信它是可以被放心地使用的。 比如如下代码,在IE下执行显示为红色,而在非IE下显示为黑色。如果把条件注释判断放在首行,则不能实现。该例题很能说明网页对IE和非IE间的兼容性问题解决。

    55970

    几个前端工程师应当掌握的“词语”

    Hack什么是HackHack,英文含义为“修改”。由于不同的对CSS的支持程度不同,同样CSS的样式代码在不同当中的表现可能出现不一致。 为了让所有样式统一,有时需要为某种设置不同于其他的“专属样式”。Hack技术的原理利用CSS中的优先级以及CSS Hack技术,来实现“不同”对应“不同CSS”的需求。 Hack的种类CSS Hack主要针对IE,可以分为3种表现形式:● 属性前缀法:CSS属性上添加Hack(*height: 300px;);● 选择前缀法:在选择上添加Hack(*html 对于网页效果来说,由于如上代码中的值设置为0,因此,并没有真正使用3D效果,但却因此开启了GPU硬件加速模式。 UA是一个特殊字符串头,使得服务能够识别客户使用的操作系统及版本、CPU 类型、及版本、渲染引擎、语言、插件等。

    42760

    HackBrowserData导出密码并解密

    hack-browser-data是一个解密数据(密码|历史记录| Cookies |书签)的导出工具,支持全平台主流“项目地址:GitHub: https:github.commoonD4rkHackBrowserData 各平台支持情况Windows:? MacOS:由于 MacOS 的安全性设置,基于 Chromium 内核解密时需要用户密码?Linux:? 帮助信息PS C:hacker> .hack-browser-data.exe -hNAME: hack-browser-data - Export passwordscookieshistorybookmarks all|password|bookmark|cookie|history (default: all) --help, -h show help (default: false) PS C:test> .hack-browser-data.exe

    36220

    学习前端 第3周 第4天

    *了解常见的问题兼容性 * 了解常见的问题兼容性的解决方案 * 了解css hack * 了解针对主流的css hack怎么写作业做页面 http:www.htmldog.com 。

    8820

    相关产品

    • 云服务器

      云服务器

      腾讯云服务器(CVM)为您提供安全可靠的弹性云计算服务。只需几分钟,您就可以在云端获取和启用云服务器,并实时扩展或缩减云计算资源。云服务器 支持按实际使用的资源计费,可以为您节约计算成本。

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      扫码关注云+社区

      领取腾讯云代金券