css移动端的兼容性问题 (适配问题)

html-css041

css移动端的兼容性问题 (适配问题),第1张

css移动端的兼容性问题 (适配问题)

一、浮动问题

简述:

我们在平时切页面时,经常会出现用完浮动(float),忘记删除.下面的布局出现莫名其妙的空白高度,导致布局调整失败

避免使用浮动

二、

链接: http://blog.csdn.net/chenmoquan/article/details/41547609

1、水平居中—使用 text-align

2、margin: auto 居中

3、table-cell 居中

4、Absolute 居中

5、使用 translate 居中

6、使用 Flexbox 居中

7、使用 calc 居中

三、常见的兼容性问题

四、css hack

五、css filter

六、更换渲染模式

七、浏览器内核

八、让H5页面适应所有的iphone手机以及安卓机型的六大技巧

九、REM 布局

面试前端,面试官问你怎么解决浏览器相容性问题,你应该怎么回答??

不同浏览器对HTML标记所具有的内外边距属性具有不同的定义。

因此如果想消除这种差距,应该在相应的CSS部分加入以下CSS程式码:

*{margin:0pxpadding:0px}

借于此,所有标记的内外边距被统一起来。

优先顺序问题:

对于同一标记属性所给定的值,有不同的优先顺序。其中优先顺序最高的是内联程式码,其实是页内CSS,接下来是浏览器预设设定,最后才是外部CSS所做的限制。

Margin不一致的问题:

当有多张图片需要排在一行时,我们通常使用“Float:Left”来实现,这样一来,浏览器就存在相容性问题。导致图片与后面的内容存在margin不一致的问题。对此一种解决方法就是给图片新增“Display:inline”项即可。

DIV居中问题:

通常我们会利用“vertical-align:middle”来实现,这对于搜狗浏览器来说,是正常的,但是对于IE浏览器来说,却并没有效果。对此,一种较好的解决方法是:将文字的行高设定与DIV一样时即可解决问题。

内外边框合并问题。通常情况下,对于两个相关DIV块,相邻时采用外边距合并原则,其结果只最两个DIV块中Margin最大值做为两个DIV之间的间距。包含的两个DIV之间的间距也遵行同样的规则。

掌握了这一规则,在利用DIV块进行布局时我们就可以做的更加得心应手。

怎么解决浏览器相容性问题

1.在大多数情况下,IE是常用的浏览器,当然IE6现在用的相对少了,自WIN7以来,IE都更新到IE9,IE9浏览模式,有一个相容性的选项,这样可以解决浏览网站的相容性

2.再个要解决浏览器的相容性,最好使用谷歌浏览器或是360浏览器,这两个浏览程式 优化做得好,能解决大多数相容问题

3.解决浏览器的相容性,还要注意浏览器的外挂,很多外挂只能在IE下使用,所以,我们要注意外挂带来的相容性问题

浏览器相容性问题怎么解决

不同的浏览器有不同的HACK程式码,如IE6采用的是_属性:值,如_margin:10px表示该样式只有IE6能识别,如果感兴趣,可以上网搜寻一下,不同的浏览器相容方式不一样,如今的浏览器在相容上,你需要先了解所相容浏览器的核心属于什么型别,现在的浏览器分为三大类,即IE一类、火狐一类、以webkit为核心的一类,如搜狗、谷歌等,不同的浏览器,其相容的程式码不一致,因此针对一个样式,你需要些多种不同的相容程式码才能完成相容。

浏览器相容性问题怎么解决啊

如果是外挂崩溃建议换一个浏览器。

不过据你说的原因个人感觉是网速问题。因为视讯网站,例如youku都是将视讯分成若干段储存的。播放的时候一段一段载入。如果网速不好或者是连通率不高也许就会出现载入完事一段之后不能顺利载入第二段。

ie8浏览器相容性问题怎么解决

方法1、简单方法:通过IE8.0浏览器介面中的“相容性检视”按钮,重新开启当前地址网页便可

方法2:通过IE8.0浏览器选单中的“工具”-“相容性检视设定”来设定相容的网站。具体方法为点选“工具”-“相容性检视设定”按钮出现如下图所示的视窗,只要在“新增此网站”中新增要相容开启的网址,然后点选“新增”按钮后,就会在“已新增到相容性检视中的网站”中显示出来网址。新增好后,点选“相容性检视设定”视窗,浏览器便可自动重新整理网页并可以正常显示。

浏览器相容性问题

常见浏览器相容性问题与解决方案(面试题目)

1,浏览器相容问题一:不同浏览器的标签预设的margin和padding不同

问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。

碰到频率:100%

解决方案:

可以使用Normalize来清除预设样式,具体可参考文章:来,让我们谈一谈 Normalize.css

也可以使用如下程式码:

body,h1,h2,h3,ul,li,input,div,span,a,form …… { margin:0padding:0}

 

2,浏览器相容问题二:块属性标签float后,又有横行的margin情况下,在IE6显示margin比设定的大

问题症状:常见症状是IE6中后面的一块被顶到下一行

碰到频率:90%(稍微复杂点的页面都会碰到,float布局最常见的浏览器相容问题)

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

备注:我们最常用的就是div+CSS布局了,而div就是一个典型的块属性标签,横向布局的时候我们通常都是用div float实现的,横向的间距设定如果用margin实现,这就是一个必然会碰到的相容性问题。

 

3,浏览器相容问题三:设定较小高度标签(一般小于10px),在IE6,IE7,遨游中高度超出自己设定高度

问题症状:IE6、7和遨游里这个标签的高度不受控制,超出自己设定的高度

碰到频率:60%

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

备注:这种情况一般出现在我们设定小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小预设的行高的高度。即使你的标签是空的,这个标签的高度还是会达到预设的行高。

 

4,浏览器相容问题四:行内属性标签,设定display:block后采用float布局,又有横行的margin的情况,IE6间距bug

问题症状:IE6里的间距比超过设定的间距 

碰到机率:20%

解决方案:在display:block后面

css浏览器相容性问题怎么解决方案

解决方案:

1.开启360安全浏览器。

2.点选浏览器下栏第二位的浏览器医生按钮,弹出对话方块。

3.点选"重灌IE”,按提示操作,直至成功。

怎么解决CSS网页与浏览器相容性问题?

这个得看你具体想相容什么了,具体相容到IE几 不同的浏览器有不同的写法,IE8的话可以直接去网上搜索相容,具体相容什么属性一般都可以搜寻到

太多了,但凡使用浏览器私有属性写的都不支持,举个例子来说:

-webkit-transform:translate3d(0,255,0) 

-moz-transform:translate3d(255,255,0)

 -ms-transform:translate3d(0,255,255)

会在各种浏览器中,解析出不同的颜色