热门关键字:
jquery > jquery教程 > html5 > 经验分享:CSS浮动

经验分享:CSS浮动

712
作者:管理员
发布时间:2020/3/12 15:44:59
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=1033

  前端和计算机相关知识

  你能描述一下渐进增强和优雅降级之间的不同吗

  浏览器兼容问题

  如何对网站的文件和资源进行优化?

  怎么学习前端?怎么接触前端新知识?

  关于前后端分离

  关于浏览器内核(渲染引擎)

  浏览器加载文件顺序以及repaint/reflow

  为什么使用多个域名来存储网络资源会更有效?

  进程和线程的区别

  前端开发的优化问题

  Flash,Ajax各自的优缺点,使用中如何取舍?

  CSS

  CSS3

  css居中的方式

  请写一个简单的幻灯效果页面

  什么是无样式内容闪烁?如何避免?

  display:none和visibility:hidden的区别

  解释浮动和工作原理

  清除浮动

  解释CSSSprits,以及你要如何使用?

  你最喜欢的图片替换方法是什么?你将如何使用?

  讨论CSShacks,条件引用或其他

  如何为有功能限制的浏览器提供网页

  在书写高效CSS时会有哪些问题需要考虑?

  如何优化网页的打印样式?

  描述下你曾经使用过的CSS预处理的优缺点

  如果设计中使用了非标准的字体,你将如何实现?

  解释下浏览器是如何判断元素是否匹配某个CSS选择器?

  解释一下你对盒模型的理解,以及如何在CSS中告诉浏览器使用不同的盒模型来渲染你的布局。

  伪类的用法:

  描述下"reset"css文件的作用和使用它的好处

  请解释一下*{box-sizing:border-box;}的作用,并且说明使用它有什么好处?

  block,inline和inline-block的区别

  css动画和js动画的优缺点

  你用过媒体查询,或针对移动端的布局/CSS吗?

  有哪些隐藏内容的方法(同时还要保证屏幕阅读器可用)

  CSS选择器级别

  alt和title的区别

  知道bfc吗?

  行内元素,块级元素,空元素各有哪些?

  html

  h5的改进:

  什么是语义化的html?

  从前端角度出发谈谈做好seo应该注意什么?

  文档类型(DOCTYPE)

  使用XHTML的局限有哪些?

  如果网页内容需要多语言,要怎么做?

  data-*属性的作用

  如果把HTML5看作做一个开放平台,那它的构建模块有哪些?

  请描述一下cookies,sessionStorage和localStorage的区别?

  浏览器本地存储与服务器端存储之间的区别

  sessionStorage和页面js数据对象的区别

  canvas和svg的区别?

  href和src的区别

  js

  ajax,跨域,jsonp

  apply和call的用法和区别:

  bind函数的兼容性

  解释下事件代理

  解释下js中this是怎么工作的?

  继承

  AMDvs.CommonJS?

  什么是哈希表?

  什么是闭包?闭包有什么作用?

  伪数组:

  undefined和null的区别,还有undeclared:

  事件冒泡机制:

  解释下为什么接下来这段代码不是IIFE(立即调用的函数表达式):functionfoo(){}();?

  "attribute"和"property"的区别是什么?

  请指出documentload和documentready两个事件的区别。

  什么是usestrict?其好处坏处分别是什么?

  浏览器端的js包括哪几个部分?

  DOM包括哪些对象?

  js有哪些基本类型?

  基本类型与引用类型有什么区别?

  关于js的垃圾收集例程

  ES5中,除了函数,什么能够产生作用域?

  js有几种函数调用方式?

  描述事件模型?IE的事件模型是怎样的?事件代理是什么?事件代理中怎么定位实际事件产生的目标?

  js动画有哪些实现方法?

  还有什么实现动画的方法?

  面向对象有哪几个特点?

  如何判断属性来自自身对象还是原型链?

  ES6新特性

  如何获取某个DOM节点,节点遍历方式

  用LESS如何给某些属性加浏览器前缀?

  js异步模式如何实现?

  事件机制,如何绑定事件处理函数

  图片预加载

  如果在同一个元素上绑定了两个click事件,一个在捕获阶段执行,一个在冒泡阶段执行.那么当触发click条件时,会执行几个事件?执行顺序是什么?

  js中怎么实现块级作用域?

  构造函数里定义function和使用prototype.func的区别?

  js实现对象的深克隆

  jquery问题

  一些编程题

  匿名函数变量

  this指向

  定时

  点击一个ul的五个li元素,分别弹出他们的序号,怎么做?

  js算法题

  js实现数组去重怎么实现?

  一、前端编程

  1.你能描述一下渐进增强和优雅降级之间的不同吗?

  答:

  定义:

  优雅降级(gracefuldegradation):一开始就构建站点的完整功能,然后针对浏览器测试和修复

  渐进增强(progressiveenhancement):一开始只构建站点的最少特性,然后不断针对各浏览器追加功能。

  都关注于同一网站在不同设备里不同浏览器下的表现程度

  区别:

  “优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站.而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段,并把测试对象限定为主流浏览器(如IE、Mozilla等)的前一个版本。

  “渐进增强”观点则认为应关注于内容本身。请注意其中的差别:我甚至连“浏览器”三个字都没提。

  理解:

  "优雅降级"就是首先完整地实现整个网站,包括其中的功能和效果.然后再为那些无法支持所有功能的浏览器增加候选方案,使之在旧式浏览器上以某种形式降级体验却不至于完全失效.

  "渐进增强"则是从浏览器支持的基本功能开始,首先为所有设备准备好清晰且语义化的html及完整内容,然后再以无侵入的方法向页面增加无害于基础浏览器的额外样式和功能.当浏览器升级时,它们会自动呈现并发挥作用.

  参考自:渐进增强、优雅降级渐进增强和优雅降级

  2.浏览器兼容问题:

  问题1不同浏览器的标签默认的外补丁和内补丁不同.

  即随便写几个标签,在不加样式控制的情况下,各自的margin和padding差异较大.

  解决方法:CCS里:*{margin:0;padding:0}

  问题2块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大

  会使得ie6后面的一块被顶到下一行.

  解决方案:在float的标签样式中加入display:inline;将其转化为行内属性

  问题3设置较小高度标签(一般小于10px),在IE6,IE7,遨游中高度超出自己设置高度

  IE6、7和遨游里这个标签的高度不受控制,超出自己设置的高度

  解决方案:给超出高度的标签设置overflow:hidden;或者设置行高line-height小于你设置的高度

  原因:ie8之前的浏览器都会给标签一个最小默认的行高的高度.即使标签是空的,这个标签的高度还是会达到默认的行高.

  问题4行内属性标签,设置display:block后采用float布局,又有横行的margin的情况,IE6间距bug

  解决:在display:block;后面加入display:inline;display:table;

  问题5图片默认有间距

  几个img标签放在一起的时候,有些浏览器会有默认的间距,加了问题一中提到的通配符也不起作用。

  解决:使用float属性为img布局

  问题6标签最低高度设置min-height不兼容

  因为min-height本身就是一个不兼容的CSS属性,所以设置min-height时不能很好的被各个浏览器兼容

  如果我们要设置一个标签的最小高度200px,需要进行的设置为:{min-height:200px;height:auto!important;height:200px;overflow:visible;}

  问题7透明度的兼容CSS设置

  使用hacker

  IE6认识的hacker是下划线_和*

  IE7,遨游认识的hacker是*

  问题8IEol的序号全为1,不递增

  解决:li设置样式{display:list-item}

  问题9

  ie6,7不支持display:inline-block

  解决方法:设置inline并触法haslayout

  display:inline-block;*display:inline;*zoom:1

  参考自:常见浏览器兼容性问题与解决方案

  3.如何对网站的文件和资源进行优化?

  答:

  文件合并(同上题“假若你有5个不同的CSS文件,加载进页面的最好方式是?”)

  减少调用其他页面、文件的数量。一般我们为了让页面生动活泼会大量使用background来加载背景图,而每个background的图像都会产生1次HTTP请求,要改善这个状况,可以采用css的1个有用的background-position属性来加载背景图,我们将需要频繁加载的多个图片合成为1个单独的图片,需要加载时可以采用:background:url(....)no-repeatx-offsety-offset;的形式加载即可将这部分图片加载的HTTP请求缩减为1个。

  每个http请求都会产生一次从你的浏览器到服务器端网络往返过程,并且导致推迟到达服务器端和返回浏览器端的时间,我们称之为延迟。

  文件最小化/文件压缩

  即将需要传输的内容压缩后传输到客户端再解压,这样在网络上传输的数据量就会大幅减小。通常在服务器上的Apache、Nginx可以直接开启这个设置,也可以从代码角度直接设置传输文件头,增加gzip的设置,也可以从负载均衡设备直接设置。不过需要留意的是,这个设置会略微增加服务器的负担。建议服务器性能不是很好的网站,要慎重考虑。

  js和css文件在百度上搜一个压缩网站就能压缩,但是在实际开发的项目中,使用gulp、webpack等工具可以打包出合并压缩后的文件,小图片可以在打包时转换成base64方式引入,大图片可以被压缩,html文件也是可以被压缩的

  使用CDN托管

  CDN的全称是ContentDeliveryNetwork,即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快、更稳定。其目的是使用户可就近取得所需内容,解决Internet网络拥挤的状况,提高用户访问网站的响应速度。

  缓存的使用

  Ajax调用都采用缓存调用方式,一般采用附加特征参数方式实现,注意其中的<scriptsrc=”xxx.js?{VERHASH}”,{VERHASH}就是特征参数,这个参数不变化就使用缓存文件,如果发生变化则重新下载新文件或更新信息。

  css文件放置在head,js放置在文档尾

  在服务器端配置control-cachelast-modify-date

  在服务器配置Entity-Tagif-none-match

  用更少的时间下载更多的文件,提高网站加载速度,提高用户体验,可以使用以下方法:

  1.csssprites----将小图片合并为一张大图片,使用background-position等css属性取得图片位置

  2.将资源放在多个域名下-----打开控制台,可以看到很多网站都是这么做的~

  3.图片延迟加载-----很多电商网站、新闻网站,尤其是用到瀑布流展示图片的时候,很多都这么做了,这个技术已经很普遍~

  书写代码的时候要注意优化:

  1.css

  将可以合并的样式合并起来,比如margin-top、margin-bottom等。

  给img图片设置宽高,因为浏览器渲染元素的时候没有找到这两个参数,需要一边下载图片一边计算大小,如果图片很多,浏览器需要不断地调整页面。这不但影响速度,也影响浏览体验。当浏览器知道了高度和宽度参数后,即使图片暂时无法显示,页面上也会腾出图片的空位,然后继续加载后面的内容。从而加载时间快了,浏览体验也更好了。

  2.js

  少改变DOM元素,少触发reflow,可以复用的代码提出来写成公共的等等……

  3.img

  优化图片,不失真的情况下尽量减少图片大小,使用iconfont等

  4.怎么学习前端?怎么接触web新知识?

  5.关于前后端分离:

  前端:负责View和Controller层。

  后端:只负责Model层,业务处理/数据等。

  6.关于浏览器内核(渲染引擎)

  先说一下浏览器的结构:

  ①、用户界面(UI)-包括菜单栏、工具栏、地址栏、后退/前进按钮、书签目录等,也就是能看到的除了显示页面的主窗口之外的部分;

  ②、浏览器引擎(Renderingengine)-也被称为浏览器内核、渲染引擎,主要负责取得页面内容、整理信息(应用CSS)、计算页面的显示方式,然后会输出到显示器或者打印机;

  ③、JS解释器-也可以称为JS内核,主要负责处理javascript脚本程序,一般都会附带在浏览器之中,例如chrome的V8引擎;

  ④、网络部分-主要用于网络调用,例如:HTTP请求,其接口与平台无关,并为所有的平台提供底层实现;

  ⑤、UI后端-用于绘制基本的窗口部件,比如组合框和窗口等。

  ⑥、数据存储-保存类似于cookie、storage等数据部分,HTML5新增了webdatabase技术,一种完整的轻量级客户端存储技术。

  注:IE只为每个浏览器窗口启用单独的进程,而chrome浏览器却为每个tab页面单独启用进程,也就是每个tab都有独立的渲染引擎实例。

  现在的主要浏览器:

  IE、Firefox、Safari、Chrome、Opera。

  它们的浏览器内核(渲染引擎):

  IE--Trident、

  FF(Mozilla)--Gecko、

  Safari--Webkit、

  Chrome--Blink(WebKit的分支)、

  Opera--原为Presto,现为Blink。

  因此在开发中,兼容IE、FF、Opera(Presto引擎是逐步放弃的)、Chrome和Safari中的一种即可,Safari、Chrome的引擎是相似的。

  7.浏览器加载文件(repaint/reflow)

  文件加载顺序

  浏览器加载页面上引用的CSS、JS文件、图片时,是按顺序从上到下加载的,每个浏览器可以同时下载文件的个数不同,因此经常有网站将静态文件放在不同的域名下,这样可以加快网站打开的速度。

  reflow

  在加载JS文件时,浏览器会阻止页面的渲染,因此将js放在页面底部比较好。

  因为如果JS文件中有修改DOM的地方,浏览器会倒回去把已经渲染过的元素重新渲染一遍,这个回退的过程叫reflow。

  CSS文件虽然不影响js文件的加载,但是却影响js文件的执行,即使js文件内只有一行代码,也会造成阻塞。因为可能会有varwidth=$('#id').width()这样的语句,这意味着,js代码执行前,浏览器必须保证css文件已下载和解析完成。

  办法:当js文件不需要依赖css文件时,可以将js文件放在头部css的前面。

  常见的能引起reflow的行为:

  1.改变窗囗大小

  2.改变文字大小

  3.添加/删除样式表

  4.脚本操作DOM

  5.设置style属性

  等等……

  reflow是不可避免的,只能尽量减小,常用的方法有:

  1.尽量不用行内样式style属性,操作元素样式的时候用添加去掉class类的方式

  2.给元素加动画的时候,可以把该元素的定位设置成absolute或者fixed,这样不会影响其他元素

  repaint

  另外,有个和reflow相似的术语,叫做repaint(重绘),在元素改变样式的时候触发,这个比reflow造成的影响要小,所以能触发repaint解决的时候就不要触发reflow……

  8.为什么利用多个域名来请求网络资源会更有效?

  动静分离需求,使用不同的服务器处理请求。处理动态内容的只处理动态内容,不处理别的,提高效率。CDN缓存更方便

  突破浏览器并发限制:相关问题:浏览器同一时间可以从一个域名下载多少资源?(即:浏览器并发请求数)

  也就是说:同一时间针对同一域名下的请求有一定数量限制。超过限制数目的请求会被阻止。不同浏览器这个限制的数目不一样。

  Cookieless,节省带宽,尤其是上行带宽一般比下行要慢。

  用户的每次访问,都会带上自己的cookie,挺大的。假如twitter的图片放在主站域名下,那么用户每次访问图片时,requestheader里就会带有自己的cookie,header里的cookie还不能压缩,而图片是不需要知道用户的cookie的,所以这部分带宽就白白浪费了。

  节约主域名的连接数,从而提高客户端网络带宽的利用率,优化页面响应。因为老的浏览器(IE6是典型),针对同一个域名只允许同时保持两个HTTP连接。将图片等资源请求分配到其他域名上,避免了大图片之类的并不一定重要的内容阻塞住主域名上其他后续资源的连接(比如ajax请求)。

  避免不必要的安全问题(上传js窃取主站cookie之类的)

  9.进程和线程的区别

  一个程序至少有一个进程,一个进程至少有一个线程.

  线程的划分尺度小于进程,使得多线程程序的并发性高。

  线程是独立调度的基本单位,进程是拥有资源的基本单位

  另外,进程在执行过程中拥有独立的内存单元,而多个线程共享内存,从而极大地提高了程序的运行效率。

  线程在执行过程中与进程还是有区别的。

  每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。

  但是线程不能够独立执行,必须依存在应用程序中,由应用程序提供多个线程执行控制。

  从逻辑角度来看,

  多线程的意义在于一个应用程序中,有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用,来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。

  10.前端开发的优化问题

  前端开发的优化问题:

  (1)减少http请求次数:cssspirit,datauri

  (2)JS,CSS源码压缩

  (3)前端模板JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数

  (4)用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能

  (5)用setTimeout来避免页面失去响应

  (6)用hash-table来优化查找

  (7)当需要设置的样式很多时设置className而不是直接操作style

  (8)少用全局变量

  (9)缓存DOM节点查找的结果

  (10)避免使用CSSExpression

  (11)图片预载

  (12)避免在页面的主体布局中使用table,table要等其中的内容完全下载之后才会显示出来,显示比div+css布局慢

  如何控制网页在网络传输过程中的数据量

  (1)启用GZIP压缩

  (2)保持良好的编程习惯,避免重复的CSS,JavaScript代码,多余的HTML标签和属性

  11.Flash、Ajax各自的优缺点,在使用中如何取舍?

  Ajax的优势

  (1)可搜索型

  (2)开放性

  (3)费用

  (4)易用性

  (5)易于开发

  Flash的优势

  (1)多媒体处理

  (2)兼容性

  (3)矢量图形比SVG,Canvas优势大很多

  (4)客户端资源调度,比如麦克风,摄像头

  参考:前端开发的优化问题

  二、CSS

  1.CSS3

  CSS3新特性:

  新增各种CSS选择器(:not(.input):所有class不是“input”的节点)

  圆角border-radiuis

  多列布局:multi-columnlayout

  阴影和反射:multi-columnlayout

  文字特效:text-shadow

  线性渐变:gradient

  旋转:transform

  缩放,定位,倾斜,动画,多背景:transform:\scale(0.85,0.90)\translate(0px,-30px)\skew(-9deg,0deg)\Animation

  参考:CSS3中的一些属性

  2.css居中的方式

  参考:实现div的水平居中和垂直居中

  3.请写一个简单的幻灯效果页面

  4.什么是无样式内容闪烁?如何避免?

  答:

  what?

  如果使用import方法对CSS进行导入,会导致某些页面在Windows下的InternetExplorer出现一些奇怪的现象:以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(FlashofUnstyledContent),简称为FOUC。

  why?

  使用import导入样式表

  将样式表放在页面底部

  有几个样式表,放在页面不同位置

  原因即:当样式表晚于结构性html加载,当加载到此样式表时,页面将停止之前的渲染。此样式表被下载和解析后,将重新渲染页面,也就出现了短暂的花屏现象。

  how?

  使用LINK标签将样式表放在文档HEAD中。

  5.display:none和visibility:hidden的区别

  display:none隐藏对应的元素,在文档布局中不再给它分配空间,它各边的元素会合拢,就当他从来不存在。

  visibility:hidden隐藏对应的元素,但是在文档布局中仍保留原来的空间。

  6.解释浮动和工作原理

  答:

  浮动可以理解为让某个div元素脱离标准流,漂浮在标准流之上,和标准流不是一个层次。

  假如某个div元素A是浮动的,如果A元素上一个元素也是浮动的,那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素,那么A元素会被挤到下一行);如果A元素上一个元素是标准流中的元素,那么A的相对垂直位置不会改变,也就是说A的顶部总是和上一个元素的底部对齐。

  清除浮动是为了清除使用浮动元素产生的影响。浮动的元素,高度会塌陷,而高度的塌陷使我们页面后面的布局不能正常显示。

  关于清除浮动:清除浮动可以理解为打破横向排列。clear:none|left|right|both

  对于CSS的清除浮动(clear),一定要牢记:这个规则只能影响使用清除的元素本身,不能影响其他元素。

  参考自:经验分享:CSS浮动(float,clear)通俗讲解

  7.清除浮动

  答:

  在浮动元素后面添加空标签clear:both

  给父标签使用overflow:hidden/auto;zoom:1

  父级div定义,使用伪类:after和zoom

  .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}

  .clearfloat{zoom:1}

  zoom:1的作用:触发IE下的hasLayout。zoom是IE浏览器专有属性,可以设置或检索对象的缩放比例。

  当设置了zoom的值之后,所设置的元素就会扩大或缩小,高度宽度就会重新计算了,这里一旦改变zoom值时其实也会发生重新渲染,运用这个原理,也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。

  8.解释CSSSprites,以及你要如何使用?

  答:CSSSprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background-repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置。

  9.你最喜欢的图片替换方法是什么,你如何选择使用?

  答:

  1)<h1><imgsrc="image.gif"alt="ImageReplacement"></h1>

  2)移开文字:

  <h1><span>ImageReplacement</span></h1>

  h1{background:url(hello_world.gif)no-repeat;width:150px;height:35px;}

  span{display:none;}

  注意问题:①结构性需要增加一个标签包裹文本②需要把背景图设置在外标签上,并把文本外标签隐藏.

  缺点:不利于阅览器浏览网页

  3)text-indent属性,并且给其设置一个较大的负值,x达到隐藏文本的效果

  <h1class="technique-three">w3cplus</h1>

  .technique-three{

  width:329px;

  height:79px;

  background:url(images/w3cplus-logo.png);

  text-indent:-9999px;

  }

  4)我们此处使用一个透明的gif图片,通过在img标签中的“alt”属性来弥补display:none。这样阅读器之类的就能阅读到所替换的文本是什么

  <h1class="technique-five">

  <imgsrc="images/blank.gif"alt="w3cplus"/<

  <span>w3cplus</span>

  </h1>

  .technique-five{

  width:329px;

  height:79px;

  background:url(images/w3cplus-logo.png);

  }

  .technique-fivespan{

  display:none;

  }

  5)使用零高度来隐藏文本,但为了显示背景图片,需要设置一个与替换图片一样的大小的padding值

  <h1class="technique-six">w3cplus</h1>

  .technique-six{

  width:329px;

  padding:79px000;

  height:0px;

  font-size:0;

  background:url(images/w3cplus-logo.png);

  overflow:hidden;

  }

  6)通过把span的大小都设置为“0”,来达到隐藏文本效果,这样阅读器就能完全阅读到,而且又达到了图片替换文本的效果

  <h1class="technique-seven">

  <span>w3cplus</span>

  </h1>

  .technique-seven{

  width:329px;

  height:79px;

  background:url(images/w3cplus-logo.png);

  }

  .technique-sevenspan{

  display:block;

  width:0;

  height:0;

  font-size:0;

  overflow:hidden;

  } 

  7)利用一个空白的span标签来放置背景图片,并对其进行绝对定位,使用覆盖文本,达到隐藏替换文本的效果。

  <h1class="technique-eight">

  <span></span>w3cplus

  </h1>

  .technique-eight{

  width:329px;

  height:79px;

  position:relative;

  }

  .technique-eightspan{

  background:url(images/w3cplus-logo.png);

  position:absolute;

  width:100%;

  height:100%;

  }

  8)设置字体为微小值,但这里需要注意一点不能忘了设置字体色和替换图片色一样,不然会有一个小点显示出来

  <h1class="technique-nine">w3cplus</h1>

  .technique-nine{

  width:329px;

  height:79px;

  background:url(images/w3cplus-logo.png);

  font-size:1px;

  color:white;

  }

  9)使用css的clip属性来实现图片替换文本的效果

  <h1class="technique-ten"><span>w3cplus</span></h1>

  .technique-ten{

  width:329px;

  height:79px;

  background:url(images/w3cplus-logo.png);

  }

     

  .technique-tenspan{

  border:0!important;

  clip:rect(1px1px1px1px);

  clip:rect(1px,1px,1px,1px);

  height:1px!important;

  margin:-1px;

  overflow:hidden;

  padding:0!important;

  position:absolute!important;

  width:1px;

  }

  参考自:十种图片替换文本CSS方法

  10.讨论CSShacks,条件引用或者其他

  hacks

  _width针对于ie6。*width,+width针对于ie6,7。

  color:red\9;/*IE8以及以下版本浏览器*/(但是测试可以兼容到ie10。

  *+html与*html是IE特有的标签,firefox暂不支持.而*+html又为IE7特有标签(但是测试*html兼容ie6-10。*+兼容ie7-10)。

  !important在IE中会被忽视,ie6,7,8不识别,ie9+(包括ie9)是识别的。

  条件引用

  <!--[if!IE]><!-->除IE外都可识别<!--<![endif]-->

  <!--[ifIE]>所有的IE可识别<![endif]-->

  <!--[ifIE6]>仅IE6可识别<![endif]-->

  <!--[ifltIE6]>IE6以及IE6以下版本可识别<![endif]-->

  <!--[ifgteIE6]>IE6以及IE6以上版本可识别<![endif]-->

  <!--[ifIE7]>仅IE7可识别<![endif]-->

  <!--[ifltIE7]>IE7以及IE7以下版本可识别<![endif]-->

  <!--[ifgteIE7]>IE7以及IE7以上版本可识别<![endif]-->

  <!--[ifIE8]>仅IE8可识别<![endif]-->

  <!--[ifIE9]>仅IE9可识别<![endif]-->

  11.如何为有功能限制的浏览器提供网页?

  答:功能限制的浏览器,比如低版本IE,手机浏览器,等会在很多功能上不符合Web标准,而应对方式主要有:

  只提供符合Web标准的页面

  提供另一个符合那些浏览器标准的页面

  兼容:两种思路:

  渐进增强:提供一个可用的原型,后来再为高级浏览器提供优化

  优雅降级:据高级浏览器提供一个版本,然后有功能限制的浏览器只需要一个刚好能用的版本

  相关技术:

  MediaQuery

  CSShack

  条件判断<!--[if!IE]><!-->除IE外都可识别<!--<![endif]-->

  参考自:如何为有功能限制的浏览器提供网页





如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:html
友荐云推荐