美文网首页我爱编程
Learn HTML&CSS the hard way

Learn HTML&CSS the hard way

作者: INTERNALENVY | 来源:发表于2016-06-16 19:11 被阅读41次

如何调试 IE 浏览器


1.IE7+有自带调试工具,早期版本就手动添加边框颜色来观察盒模型吧。

2.采用模拟器,例如IEtester等。

3.安装虚拟机,直接在早期ie上调试。

什么是CSS hack?在 CSS 和 HTML里如何写 hack?在 CSS 中 ie6、ie7的 hack 方式?


css hack就是为了解决不同浏览器或不同版本浏览器解析网页结果不同的现象,针对不同浏览器写不同的css代码。

css hack有三种方法:

1.css属性前缀法。

IE6:属性前加下划线或者星号

IE7:星号

IE6~9:末尾加\9

2.选择器注释法:

IE6: *body

IE7: *+body

@media screen\9{...}只对IE6/7生效

@media \0screen {body { background: red; }}只对IE8有效

@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效

@media screen\0 {body { background: green; }} 只对IE8/9/10有效

@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效

这块其实不很明白。。。。

3.IE条件注释法:

<!--[if IE]>

IE browser best browser                          只在IE中生效

<![endif]-->

<!--[if gte IE8]>

IE browser best browser                          IE8以上版本生效

<![endif]-->

<!--[if !IE]>

IE browser best browser                         非IE才生效

<![endif]-->

有关IE6 的 CSS HACK:

body{

_color:red;

};

<!--[if IE6]>

IE browser best browser

<![endif]-->

*body{

color:red;

}

关于IE7:

*+body{

color:red;

}

<!--[if IE7]>

IE browser best browser

<![endif]-->

IE6~7:

.box{

*color:red;

}

<!--[if lte IE7]>

IE browser best browser

<![endif]-->

列举几种 浏览器兼容问题


1.不同浏览器的边距默认样式不同,可以用样式重置解决。

2.一些属性的写法,例如透明度。需要在前面添加对应浏览器的标签。

3.IE早期版本不支持min-height等属性,用css hack。

针对兼容、多浏览器覆盖有什么看法?渐进增强优雅降级是什么意思?


看用户比例以及权重,多的就支持。

渐进增强和优雅降级是指,一些新的css属性或者js效果在一些浏览器上可能无法实现,所以要保证,在这些特效不能实现的时候,网页仍能正常排版运行。也就是说兼容性要做好。

reset.css和normalize.css分别是做什么的?为什么推荐使用nomalize.css?


reset.css将原有的默认样式全部清除掉。

nomalize.css保留了公认有价值的样式,尽可能的重置使得兼容性增强。

nomalize不是无脑的清除全部样式,他是模块化的并且有文档,起到了兼容的作用还修复了一些bug

IE盒模型和标准盒模型有什么区别? 怎样使 IE678使用标准盒模型?box-sizing:border-box有什么作用


IE:怪异模式,宽度=内容+内边距+边框

标准:宽度=内容

用<!doctype html>可以使IE使用标准盒模型

box-sizing:border-box使元素按照IE盒模型计算

在 ie 6, 7, 8中展示 盒模型、inline-block、max-width的区别


在网上找了一下测试结果

1.IE6 不支持inline-block max-width

2.IE7不支持inline-block,部分支持max-width

3.IE8都支持

版权归INTERNALENVY和饥人谷所有,转载请注明出处。

相关文章

  • Learn HTML&CSS the hard way

    Q:视频中的.main中的float是不是可以去掉呢,因为.ct已经清除浮动了。 A:单纯的防止父元素塌陷的话可以...

  • Learn HTML&CSS the hard way

    如何调试 IE 浏览器 1.IE7+有自带调试工具,早期版本就手动添加边框颜色来观察盒模型吧。 2.采用模拟器,例...

  • Learn HTML&CSS the hard way

    盒模型包括哪些属性 marginpaddingbordercontentwidthheight text-alig...

  • Learn HTML&CSS the hard way

    CSS选择器常见的有几种? 元素选择器: divulolh1-6pa 类选择器: .class{} id选择器: ...

  • Learn HTML&CSS the hard way

    CSS Sprite(雪碧图|精灵图)指什么? 有什么作用 因为一个网页可能会有很多图片,一个一个请求的话会影响到...

  • Learn HTML&CSS the hard way

    样式有几种引入方式? link 和 @import有什么区别 1. 标签: p { background-colo...

  • Learn HTML&CSS the hard way

    line-height有什么作用? 设置行高。使文本垂直居中(高度须与div一致,并且长度在一行之内)。 如何去查...

  • Learn HTML&CSS the hard way

    文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流就是普通流,没有定位浮动什么样式的最开始的那一个层面,...

  • Learn HTML&CSS the hard way

    在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例 想出现外边距合并: ...

  • Learn HTML&CSS he hard way I

    有序列表、无序列表、自定义列表如何使用?写个简单的例子。三者在语义上有什么区别?在哪些情况下使用哪种(重要)? 如...

网友评论

    本文标题:Learn HTML&CSS the hard way

    本文链接:https://www.haomeiwen.com/subject/ilwmdttx.html