CSShack、盒模型及样式的重置和标准化

如何调试 IE 浏览器

  • 若ie8及以上版本中,可以使用控制台(按f12调出)进行调试,在控制台上可以切换不同的浏览器版本进行模拟,但没有ie6;
  • 添加边框border 或者outline产看布局,进行调试,注意ie6下不支持outline;

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

  • 由于不同厂商的浏览器或浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等)对CSS的支持、解析不一样,导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时,我们为了获得统一的页面效果,就需要针对不同的浏览器或不同版本写特定的CSS样式,我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程,叫做CSS hack;
  • hack的书写有以下三种方式:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    1、属性前缀法(即类内部Hack),例如 IE6能识别下划线”_“和星号”*”,IE7能识别星号”*”,但不能识别下划线”“;
    2、选择器前缀法(即选择器Hack),例如 IE6能识别* .class{},IE7能识别*+ .class{};
    3、IE条件注释法(即HTML头部引用if IE)例如:
    <!--[if IE 6]>
    <p>You are using Internet Explorer 6.</p>
    <![endif]-->
    <!--[if !IE]><!-->
    <script>alert(1);</script>
    <!--<![endif]-->
    <!--[if IE 8]>
    <link href="ie8only.css" rel="stylesheet">
    <![endif]-->

列举几种 浏览器兼容问题

  • ie6或ie7不支持部分标签和属性,比如display:inline-block,但是支持display:inline,同样的还有min-height,它在ie6下不支持;
  • 不同浏览器的默认样式差异较大,比如padding和margin。

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

  • 兼容、多浏览器覆盖是一个历史遗留问题,是随着浏览器的发展和w3c标准的建立而产生的。在写code的时候要分清主次,即先抓住主要需求,针对主流浏览器去开发,然后才去解决兼容、多浏览器覆盖问题,先完成基本功能和样式的实现,再完美细节;
  • 渐进增强是一个追加功能的过程,侧重于内容本身,首先针对低版本浏览器构建页面,保证最基本的功能,然后再针对高版本浏览器来改进样式的表现、交互的体检等,提高用户体验度;
  • 优雅降级针对那些最高级、最完善的浏览器来设计网站,将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段,在这种设计范例指引下,旧版浏览器并非关注的焦点,因此除了修复较大的错误之外,其它的差异将被直接忽略。

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

  • reset.css就是重置样式覆盖浏览器的默认样式以达到统一的表现效果。
  • Normalize.css是reset.css的改良版,在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset,Normalize.css是一种现代的、为HTML5准备的优质替代方案。
  • 它有以下优点:

    1.Normalize.css 保护了不同浏览器中有价值的默认值,而不是像reset一样重置所有样式;
    2.Normalize.css修复了常见的桌面端和移动端浏览器的bug,修复的问题包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug;
    3.Normalize.css不会在浏览器调试工具中出现大段大段的继承链,避免调试工具变的杂乱;
    4.Normalize.css 是模块化的,由多个相关却又独立的部分组成,这能让你自己选择性地移除掉某些永远不会用到部分;
    5.Normalize.css的代码基于详细而全面的跨浏览器研究与测试,拥有详细的文档。

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

  • 在ie678怪异模式(不添加 doctype)下,浏览器将会使用 ie 盒模型,这种情况下盒模型的宽度=边框+padding+内容宽度
  • 当添加 doctype声明后, chrome, ie9+, ie678使用标准盒模型, 即盒模型的宽度= 内容宽度
  • box-sizing属性有三个取值:
    • content-box(default):border和padding不计算入width之内,
    • padding-box:padding计算入width内,
    • border-box:border和padding计算入width之内。

      操作

  • 安装virtualbox
    0_1462092348142_upload-07ab36eb-8b2b-4e3b-923e-ac575db9c13b

  • 正常浏览器显示效果

  • 0_1462091336414_upload-4fd2d8c0-720d-46ac-84ec-599ab0047a8a

标准模式IE6中显示效果:

  • 0_1462091393369_upload-18740b82-ea96-4502-8f9a-95235c6d5231

混杂模式(没有声明doctype)IE6中显示效果:

  • 0_1462092214995_upload-b3daced8-fed2-4bb6-9b9b-3202fb2cb330

标准模式下IE7中的显示效果:

  • 0_1462091645367_upload-88ae9a6f-e403-4137-aa2a-07e6b72e2235
    混杂模式下IE6中显示效果:
  • 0_1462091806275_upload-6fa0696c-57c3-444d-886a-8f8b67f2d184
文章目录
  1. 1. 如何调试 IE 浏览器
  2. 2. 什么是CSS hack?在 CSS 和 HTML里如何写 hack?在 CSS 中 ie6、ie7的 hack 方式?
  3. 3. 列举几种 浏览器兼容问题
  4. 4. 针对兼容、多浏览器覆盖有什么看法?渐进增强和优雅降级是什么意思?
  5. 5. reset.css和normalize.css分别是做什么的?为什么推荐使用 nomalize.css?
  6. 6. IE盒模型和标准盒模型有什么区别? 怎样使 IE678使用标准盒模型?box-sizing:border-box有什么作用
  • 操作
  • ,