1、什么是CSS hack? CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的,CSS hack就是让你记住这个标准),以
不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题。而这个针对不同的浏览器写不同的CSS 代码的过程,就叫CSS Hack。
css ie6,ie7,ie8 兼容性写法,CSS hack写法 margin-bottom:40px; /*ff的属性*/ margin-bottom:140px\9; /* IE6/7/8的属性 */ color:red\0; /* IE8支持 */ *margin-bottom:450px; /*IE6/7的属性*/ +margin-bottom:450px; _color:#ff0000; /* 只ie6支持 */ #1 {
产品的角度(产品的受众、受众的浏览器比例、效果优先还是基本功能优先) 成本的角度 (有无必要做某件事)
Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <titl
属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀,以达到预期的页面展现效果。
以上就是css中hack的3种表现形式,希望对大家有所帮助。更多css学习指路:css教程
自从中国联盟成员导航采用响应式布局之后,不少朋友反馈该页面在 IE8、IE7 浏览器会错排,经测试发现确实存在这个问题,但我一直也没去深究解决。这几天博客折腾得很厉害,把多说开除了,而又由于 wopu
IE6 hack _background-color:#CDCDCD; /* ie 6*/ IE7 hack *background-color:#dddd00; /* ie 7*/ IE8 hack background-color:red \0; /* ie 8/9*/ IE9 hack background-color:blue \9\0; 浏览器优先级别:FF<IE7<IE6,CSS hack书写顺序一般为FF IE7 IE6 以: " #demo {width:100px;}
随着浏览器的发展,css hack 技术的使用应该越来越少了,但是在某些关键时刻以及综合的WEB应用或者老项目中,可能还需要使用 css hack 技术来解决一些问题。
在进行网站开发过程中,IE是另很多程序员头疼的一个浏览器,他的版本兼容性很难调整,尤其是IE6,IE7,IE8,IE9,IE10这几个版本的区别有很大。现在百度与谷歌都有了一行解决这种兼容性的代码了。我们先来看一下百度的。
除IE外都可识别
有时,我们为了让一些外观在不同浏览器中做保持一致。就不得不用css hack。下面是常用的css hack。
这样有效是有效,但是用 HTML VALIDATOR 里,报错,因为这个不符合 XHTML 1.1 的规范, 如果把 ELSE 语句去掉,则正确。
lte:就是Less than or equal to的简写,也就是小于或等于的意思。 lt :就是Less than的简写,也就是小于的意思。 gte:就是Greater than or equal to的简写,也就是大于或等于的意思。 gt :就是Greater than的简写,也就是大于的意思。 ! :就是不等于的意思,跟javascript里的不等于判断符相同 Example:
由于不同厂商的浏览器,比如Internet Explorer、Chrome、Mozilla Firefox、Safari等,或者是统一厂商的浏览器的不同版本,比如IE6和IE7,对CSS的解析和认识不完全一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。这个时候,我们就需要针对不同的浏览器,去写不同CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中,也能得到我们想要的页面效果。
CSS Hack是在标准CSS没办法兼容各浏览器显示效果时才会用上的补救方法,在各浏览器厂商解析CSS没有达成一致前,我们只能用这样的方法来完成这样的任务. 我进行前端开发的时候,测试用的浏览器大致有: IE7, IE6, Opera9(文章撰写时版本为9.25 8825), Safari3(文章撰写时版本为3.0.4 523.15), Firefox2(文章撰写时版本为2.0.0.11). 在正常的 selector { property:value; } 的基础上常会根据具体情况为相同元素使用Hack以
1、浏览器对CSS样式的支持程度、分析结果和识别CSS的优先级,可以根据这些的特征写出不同的CSS样式代码。
在修改模板的过程中,需要重写CSS样式表。正好看到instantshift.com有一篇CSS常用技巧的总结文章,我就把它整理出来,供自己参考,也希望对大家有用。
前言 过去一直听说旧版本IE下很多诡异bug均由一个神秘角色引起的,那就是hasLayout。趁着最近突然发神经打算好好学习CSS,顺便解答多年来的疑惑。 hasLayout到底是何方神圣? hasLayout可以简单看作是IE5.5/6/7中的BFC(Block Formatting Context)。也就是一个元素要么自己对自身内容进行组织和尺寸计算(即可通过width/height来设置自身的宽高),要么由其containing block来组织和尺寸计算。而IFC(即没有拥有布局)而言,则是元素无法
然后,将小容器定位为absolute,再将它的左上角沿y轴下移50%,最后将它margin-top上移本身高度的50%即可。
由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样,以及CSS优先级对浏览器展现效果的影响,我们可以据此针对不同的浏览器情景来应用不同的CSS。
浏览器的兼容性问题,通常是因为不同的浏览器对同一段代码有不同的解析,造成页面显示不统一的情况。
针对ie7之前的版本 针对各浏览器下Hack的写法: 1、 Firefox @-moz-document url-prefix() { .selector { property
一、前言 由于本人英语能力有限,译本内容难免有误,望各位指正! 本译文不含附录部分,请知悉。 二、译文内容 为了让用户正常访问遵循Web标准的网站和90年代后期的非标准网站,当前的浏览器都内置了多种引擎模式。本文将解释这些模式和它们触发的原理。 本文概要(没耐性的同学看完这个就可以闪了!) 本文结论:以<!DOCTYPE html>作为你们的HTML文档(http头的mime为text/http的
x-ua-compatible 用来指定IE浏览器解析编译页面的model x-ua-compatible 头标签大小写不敏感,必须用在 head 中,必须在除 title 外的其他 meta 之前使用。 1、使用一行代码来指定浏览器使用特定的文档模式。 <meta http-equiv="x-ua-compatible" content="IE=9" > <meta http-equiv="x-ua-compatible" content="IE=8" > <meta http-equiv="x-ua-compatible" content="IE=7" > 2、在一些情况下,我们需要限定浏览器对文档的解析到某一特定版本,或者将浏览器限定到一些旧版本的表现中。可以用如下的方式: <meta http-equiv="x-ua-compatible" content="IE=EmulateIE9" > <meta http-equiv="x-ua-compatible" content="IE=EmulateIE8" > <meta http-equiv="x-ua-compatible" content="IE=EmulateIE7" > 使用这种写法,浏览器或者使用标准模式进行解析,或者使用 IE5 Quirks 模式进行解析。 3、为了测试,我们也可以使用下面的语句指定浏览器按照最高的标准模式解析页面。 <meta http-equiv="x-ua-compatible" content="IE=edge" > 4、多个模式的指定。我们可以用逗号分割多个版本,这种情况下,浏览器会从这个列表中选择一个他所支持的最高版本来使用标准模式进行渲染。如下面的例子,在IE8进行浏览时,将会使用IE7的标准模式进行渲染,因为他本身不支持IE9和IE10。 <meta http-equiv="x-ua-compatible" content="IE=7,9,10" > 参考: http://www.cnblogs.com/cocowool/archive/2013/04/25/3043832.html http://www.cnblogs.com/nidilzhang/archive/2010/01/09/1642887.html http://msdn.microsoft.com/en-us/library/jj676915(v=vs.85).aspx 一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10 2012-04-25 16:29:04| 分类: 学习 |字号 订阅 在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案 百度也应用了这种方案去解决IE的兼容问题 百度源代码如下 <!Doctype html> <html xmlns=http://www.w3.org/1999/xhtml xmlns:bd=http://www.baidu.com/2010/xbdml> <head> <meta http-equiv=Content-Type content=“text/html;charset=utf-8″> <meta http-equiv=X-UA-Compatible content=IE=EmulateIE7> <title>百度一下,你就知道 </title> <script>var wpo={start:new Date*1,pid:109,page:‘superpage’}</script> <meta http-equiv=X-UA-Compatible content=IE=EmulateIE7> 可以打开百度,右键查看源码看下!我们可以看下文件头是否存在这样一行代码! 这句话的意思是强制使用IE7模式来解析网页代码! 在这里送上几种IE使用模式! <meta http-equiv=“X-UA-Compatible” content=“IE=8″> 2. Google Chrome Frame也可以让IE用上Chrome的引擎: <meta http-equiv=“X-UA-Compatible” content=“chrome=1″ /> 3.强制IE8使用IE7模式来解析 <meta http-equiv=“X-UA-Compatible” content=“IE=EmulateIE7″><!– IE7 mode –> //或者 <meta http-equiv=“X-UA-Compatible” content=“IE=7″><!– IE7 mode –> 4.强制IE8使用I
早上看了司徒先生的js版属性选择器(http://www.cnblogs.com/rubylouvre/archive/2009/10/27/1590102.html),也激发了我深入了解css选择器的学习欲望, 整理于此以便日后备查 *:匹配任何元素。 例如: *{margin:0} E:匹配任何E元素。 例如: div{color:red} E F:匹配E的所有后代F元素。 E > F:匹配E的所有子F元素。这个选择器与上一个选择器的区别是:E F会匹配E标签里面嵌套的所有F标签,而E > F只会匹配
这时我们可以使用 jQuery 遍历中的 not() 方法来排除某些元素,例如根据元素的 #id ,.class 等排除,代码如下:
IE6好像支持这种情况,因为它能匹配链中的最后一个class到使用该class的元素上,然而,它并不能限制一个使用链中所有class的元素。
一、语义化元素 1. ul标签 W3C草案: The ul element represents an unordered list of items; that is, a list in which changing the order of the items would not change the meaning of list.W3C specification 语义化元素:表示包含一组无序列表项内容。 在
在网上搜了一下,结论非常笼统,讲IE从不讲版本,因此自己做了测试并上传结论。以下结论皆是在标准模式下测试通过的,没有测试quirk模式。
关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是. 以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一、CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK. (注意写法.记得该声明位置需要提前.) <style> #wrapper { width: 100px!important; /* IE7+FF */ wid
在做angular的SPA开发时,我们经常会遇见在如Chrome这类能够快速解析的浏览器上出现表达式({{ express }} ),或者是模块(div)的闪烁。对于这个问题由于JavaScript去操作DOM,都会等待DOM加载完成(DOM ready)。对于angular会在DOM ready完会才回去解析html view Template,所以对于Chrome这类快速的浏览器你会看见有闪烁的情况出现。而对于IE7,8这类解析稍慢的浏览器大部分情况下是不会出现这个问题的。
关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一、CSS HACK 以下两种方法几乎能解决现今所有HACK.
CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名.
try…catch try{}catch(e) {}finally{} Error.name的六种值对应的信息: 1. EvalError:eval()的使用与定义不一致 2. RangeError:数值越界 3. ReferenceError:非法或不能识别的引用数值 4. SyntaxError:发生语法解析错误 5. TypeError:操作数类型错误 6. URIError:URI处理函数使用不当 复制代码 es5严格模式 “use strict” 不再兼容es3的一些不规则语法。使用全
Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type='text/css'> #example { background: #ff0000;width:100px;height:100px } /* Moz/FF/IE8 beta2 */ *html #example { background:
先来说说什么是浏览器兼容? 对于很多初学者来说先要知道目前主流的浏览器有IE6、IE8、Mozilla、 FireFox、Opera、Safari、Chrome、Netscape等。这些主流的浏览器主要由四个内核程序来服务: Trident内(IE,MaxThon,TT,The World,360,搜狗浏览器等) Gecko内核(Netscape6及以上版本,FF,MozillaSuite/SeaMonkey等) Presto内核(Opera7及以上 ) Webkit内核(Safari,Chrome) 由于
那些被遗忘的选择器 在IE6~8“统治”网络世界的时代,CSS2版本曾经推出过几种选择器,而这几种选择器由于对IE6支持程度较差,使得前端开发工程师不得不将其舍弃。而今,IE6已逝,赶紧把这些方便快捷的选择器用在日常的开发当中吧! 伪类选择器 :first-child 子代选择器 .wrap > p 毗邻选择器 .con + p 伪类选择器 :first-child 说到:first-child,很多人会联想到:last-child,但是请务必注意::first-child和:last-child并非“师出
虽然浮动可以便于页面布局,但同时会产生一些问题,也就是常说的副作用。浮动元素最常见的缺陷是:父元素的高度塌陷和影响兄弟元素的位置。
忙了一个月,终于也有点东东出来了,算是我较为满意的一个作品,不算最好,但足以见到自己的进步。这个月里也体会到一些蛮重要的东西,像样式的书写顺序、文件的结构、兼容性的问题等等。
文章推荐:http://blog.csdn.net/creasher/article/details/51353416
浏览器有着大量不同的版本,不同种类的浏览器的内核也不尽相同,所以不同浏览器对代码的解析会存在差异,这就导致对页面渲染效果不统一的问题。
啥也不说,先看代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>IE7下当position:relative遇到text-align:center</title> <meta
前端是一个苦逼的职业,不仅因为技术更新快,而且要会的东西实在太多了,更让人头疼的是,还要面临各种适配、兼容性问题。
CSS篇主要从CSS兼容、CSS3新特性、CSS选择器、高频属性、高频布局、高频知识点、性能优化等方面进行归纳。如对HTML知识点感兴趣,可移步至:知识整理之HTML篇
领取专属 10元无门槛券
手把手带您无忧上云