通过之前的准备,我们现在将专门研究在HTML和CSS代码中遇到的常见跨浏览器问题,以及哪些工具可以用来防止问题的发生,或者解决出现的问题。这包括静态分析代码,处理CSS前缀,使用浏览器开发工具来跟踪问题,使用polyfills添加到浏览器的支持,解决响应的设计问题,等等。

先决条件:

熟悉核心的HTMLCSSJavaScript语言;了解跨浏览器测试中涉及的高级概念。

本文目标: 为了能够诊断常见的HTML和CSS跨浏览器问题,并使用适当的工具和技术来解决它们

HTML 和 CSS 的问题

HTML和CSS的问题就是相当简单,简单到开发人员通常不会认真对待它们,因此难以确保代码简洁、高效以及能在语义上描述页面上的功能。

在最坏的情况下,甚至使用JavaScript来生成整个网页的内容和风格,这使得你的页面可读性较差并且性能低下(生成DOM元素的操作是昂贵的)。

在其他情况中,不同浏览器对新特性的支持不同,也可能会使某些功能和样式对某些用户不起作用。

除此之外,响应式设计问题也很常见。在桌面浏览器中看起来不错的网站可能会在移动设备上提供可怕的体验,因为内容太小而无法阅读,或者由于昂贵的动画,网站可能会很慢。

首先:解决一般问题

我们在本系列的第一篇文章中说过,一个好的策略是在桌面/移动设备上测试几个现代的浏览器,以确保您的代码正常工作,然后才能专注于跨浏览器问题。

在我们的 调试HTML调试CSS 文章中,我们提供了一些关于调试 HTML/CSS 的基本指导 - 如果您不熟悉基础知识,那么在继续之前,您一定要学习这些文章。

基本上,这是一个检查您的HTML和CSS代码是否格式正确,不包含任何语法错误的问题。

注意:当不同的CSS规则开始相互冲突时,会出现CSS和HTML的一个常见问题。当您使用第三方代码时,这可能是特别有问题的。例如,你可以使用一个CSS框架,并发现它使用的类名之一与你已经用于不同目的的类名冲突。或者您可能会发现,由某种第三方API(例如生成广告横幅)生成的HTML包含您已经用于不同目的的类名称或ID。为了确保不会发生这种情况,您需要首先研究您正在使用的工具,并围绕它们设计您的代码。这也是值得“命名空间”的CSS,例如,如果你有一个小部件,确保它有一个独特的类,然后启动选择元件内的这个类的选择器,所以冲突的可能性较小。例如.audio-player ul a

验证

对于HTML,验证涉及到确保所有的标签都被正确地关闭和嵌套,你使用的是DOCTYPE,而且你正在使用标签来达到正确的目的。一个好的策略是定期验证你的代码。一个可以做到这一点的服务是W3C标记验证服务,它允许您指向您的代码,并返回错误列表:The HTML validator homepage

CSS有一个类似的故事 - 你需要检查你的属性名拼写是否正确,属性值拼写正确,并且对于它们使用的属性是有效的,你不会丢失任何大括号,等等。为了这个目的,W3C也有一个CSS Validator

Linters

另一个很好的选择就是所谓的Linter应用程序,它不仅可以指出错误,还可以标记关于CSS中不良做法的警告,以及其他一些要点。Linters 可以定制更严格或更宽松的错误/警告报告。

有许多在线 Linter 应用程序,其中最好的可能是 脏标记(HTML,CSS,JavaScript)和CSS Lint(仅限CSS)。这些可以让你把代码粘贴到一个窗口中,并且会用十字标记任何错误,然后可以将它们悬停,以获得错误信息,通知你问题是什么。肮脏的标记还允许您使用清理按钮修复您的标记

 

但是,将代码复制并粘贴到网页上以检查其有效性是不太方便的。你真正想要的是一个linter,将适合您的标准工作流程与最小的麻烦。

许多代码编辑器都有linter插件。Github的Atom代码编辑器例如有一个丰富的插件生态系统可用,有很多linting选项。向您展示一个这样的插件通常如何工作的例子:

  1. 安装Atom(如果您还没有安装最新版本),请从上面链接的Atom页面下载。
  2. 转到Atom的首选项...对话框(例如在Mac上选择Atom> Preferences ...在Windows / Linux上选择File> Preferences ...),然后在左侧菜单中选择Install选项。
  3. 搜索包文本字段中,输入“lint”,然后按Enter / Return搜索与linting相关的包。
  4. 您应该在列表顶部看到名为lint的包首先安装它(使用安装按钮),因为其他短裤依靠它工作。之后,安装用于linting CSS 的linter-csslint插件和用于linting HTML 的linter -tidy插件。
  5. 软件包完成安装后,尝试加载一个HTML文件和一个CSS文件:在行号旁边会看到用绿色(对于警告)和红色(对于错误)圆圈突出显示的任何问题,底部提供行号,错误消息,有时建议值或其他修复。

 

其他受欢迎的编辑器也有类似的 linting 包可用。例如:

浏览器开发者工具

大多数浏览器中内置的开发人员工具还提供了有用的工具来查找错误,主要是针对CSS。

注意:在开发工具中,HTML错误不会显得那么容易,因为浏览器会尝试自动纠正错误形成的标记; W3C验证器是获取HTML错误的最佳方法 - 请参阅上面的验证。//todo

例如,在Firefox中,CSS检查器将显示未应用的CSS声明,并带有警告三角形。悬停警告三角将提供一个描述性的错误信息:

其他浏览器devtools有相似的功能。

常见的跨浏览器问题

现在让我们继续看看一些最常见的跨浏览器HTML和CSS问题。我们看到的主要领域是缺乏对现代功能和布局问题的支持。

旧版浏览器不支持新特性

 

这是一个常见的问题,尤其是当您需要支持旧的浏览器(例如旧的IE版本),或者您正在使用使用CSS前缀实现的功能时。通常,大多数核心HTML和CSS功能(如基本的HTML元素,CSS基本颜色和文本样式)在大多数浏览器中都可以使用,当您开始想要使用FlexboxHTML5视频/音频,甚至更新的CSS网格-webkit-background-clip:text等新功能时,会发现更多的问题

一旦您确定了您将要使用的潜在问题技术列表,研究它们所支持的浏览器以及相关技术是否有用是一个不错的主意。请参阅下面的查找帮助

 

HTML 回退行为

 

一些问题可以通过利用HTML / CSS工作的自然方式来解决。

无法识别的HTML元素被浏览器视为匿名内联元素(有效内联元素,没有语义值,类似于<span>元素)。您还可以参考他们通过自己的名字,并用CSS样式它们,例如-你只需要确保它们表现为你想让他们,例如设置display: block;对所有新的语义元素(如<article><aside>等),但只有在旧版本的IE不能识别他们(所以,IE 8和更低)。这样,新的浏览器就可以正常使用这些代码,但是旧的IE版本也可以对这些元素进行样式化。

 

注意:请参阅IE条件注释以获取最佳方式。

更复杂的元素,如HTML <video><audio><canvas>(和其他功能除外)有自然的fallback加入机制,其工作原理与上述相同。您可以在开始和结束标记之间添加回退内容,非支持的浏览器将有效地忽略外部元素并运行嵌套的内容。

例如:

<video id="video" controls preload="metadata" poster="img/poster.jpg">
  <source src="video/tears-of-steel-battle-clip-medium.mp4" type="video/mp4">
  <source src="video/tears-of-steel-battle-clip-medium.webm" type="video/webm">
  <source src="video/tears-of-steel-battle-clip-medium.ogg" type="video/ogg">
  <!-- Flash fallback -->
  <object type="application/x-shockwave-flash" data="flash-player.swf?videoUrl=video/tears-of-steel-battle-clip-medium.mp4" width="1024" height="576">
     <param name="movie" value="flash-player.swf?videoUrl=video/tears-of-steel-battle-clip-medium.mp4" />
     <param name="allowfullscreen" value="true" />
     <param name="wmode" value="transparent" />
     <param name="flashvars" value="controlbar=over&amp;image=img/poster.jpg&amp;file=flash-player.swf?videoUrl=video/tears-of-steel-battle-clip-medium.mp4" />
      <img alt="Tears of Steel poster image" src="img/poster.jpg" width="1024" height="428" title="No video playback possible, please download the video from the link below" />
  </object>
  <!-- Offer download -->
  <a href="video/tears-of-steel-battle-clip-medium.mp4">Download MP4</a>
</video>

这个例子(来自创建一个跨浏览器的视频播放器)不仅包括旧的IE版本的Flash视频后备,而且还包括一个简单的链接,允许你下载视频,如果即使Flash播放器不工作,至少用户仍然可以访问视频。

注意:像Video.jsJW Player这样的第三方库使用这种回退机制来提供跨浏览器支持。

 

HTML5表单元素也表现出了后备素质--HTML5引入了一些特殊的<input>类型,用于将特定的信息输入到时间,日期,颜色,数字等形式中。这些非常有用,特别是在移动平台上,它提供了一种无痛苦的输入数据对用户体验非常重要。当使用这些输入类型时,支持平台提供特殊的UI小部件,例如用于输入日期的日历小部件。

以下示例显示日期和时间输入:

 

<form>
  <div>
    <label for="date">Enter a date:</label>
    <input id="date" type="date">
  </div>
  <div>
    <label for="time">Enter a time:</label>
    <input id="time" type="time">
  </div>
</form>

此代码的输出如下所示:

注意:您也可以在GitHub上forms-test.html的形式直接看到这个运行(参见源代码)。

 

如果您在支持的浏览器(如桌面/ Android Chrome或iOS Safari)上查看该示例,则会在尝试输入数据时看到特殊的小部件/功能。在一个非支持的平台上,例如Firefox或Internet Explorer,输入只会回退到正常的文本输入,所以至少用户仍然可以输入一些信息。

注意:当然,这对于您的项目需求来说可能不是一个很好的解决方案 - 视觉呈现方面的差异并不是很大,而且更难保证数据将以您希望的格式输入。对于跨浏览器表单,依靠简单的表单元素,或者选择性地使用高级表单元素来支持浏览器,或者使用提供体面的跨浏览器表单小部件(如jQuery UIBootstrap datepicker)的库可能会更好

 

CSS 回退行为

 

CSS可以说比HTML更好。如果一个浏览器遇到一个声明或规则它不明白,它只是完全跳过它,而不应用它或抛出一个错误。这可能会让你和你的用户感到沮丧,如果这样的错误滑入产品代码,但至少意味着整个网站不会因为一个错误而崩溃,如果巧妙地使用,你可以使用它。

让我们来看一个例子 - 一个简单的CSS风格的框,它有一些CSS3特性提供的样式:

 

注意:你也可以看到这个例子在GitHub上以button-with-fallback.html的形式运行(另见源代码)。

该按钮有一些风格的声明,但我们最感兴趣的两个如下:

button {
  ...

  background-color: #ff0000;
  background-color: rgba(255,0,0,1);
  box-shadow: inset 1px 1px 3px rgba(255,255,255,0.4),
              inset -1px -1px 3px rgba(0,0,0,0.4);
}

button:hover {
  background-color: rgba(255,0,0,0.5);
}

button:active {
  box-shadow: inset 1px 1px 3px rgba(0,0,0,0.4),
              inset -1px -1px 3px rgba(255,255,255,0.4);
}

在这里,我们提供了一个RGBA background-color,改变悬停的不透明度,给用户一个暗示该按钮是交互式的提示,以及一些半透明的嵌入式box-shadow阴影,使按钮有一点纹理和深度。问题在于RGBA颜色和方块阴影在9以前的IE版本中不起作用 - 在较旧的版本中,背景根本不会显示出来,所以文本将是不可读的,没有任何好处!

为了解决这个问题,我们添加了第二个background-color声明,它只是指定了一个十六进制颜色 - 这在旧版本的浏览器中得到了支持,并且在现代闪亮功能无法使用的情况下作为后备。访问此页面的浏览器首先应用第一个background-color值,当它到达第二个background-color声明时,如果它支持RGBA颜色,它将用这个值覆盖初始值。如果不是的话,它会忽略整个声明,继续前进。

注意:这同样适用于其他CSS功能,如真正的媒体查询@font-face以及@supports块-如果不支持他们,浏览器只是忽略它们。

IE 条件注释

IE条件注释是修改后的专有HTML注释语法,可用于将HTML代码有选择地应用于不同版本的IE。这已被证明是一个非常有效的机制来解决跨浏览器的错误。语法如下所示:

<!--[if lte IE 8]>
  <script src="ie-fix.js"></script>
  <link href="ie-fix.css" rel="stylesheet" type="text/css">
<![endif]-->

只有当浏览器查看页面是IE 8或更旧时,此块才会应用IE特定的CSS和JavaScript。lte意思是“小于或等于”,但是也可以使用lt、gt、gte、!(NOT) 以及其他逻辑语法。

注意:Sitepoint的Internet Explorer条件注释提供了一个有用的初学者教程/参考,详细解释了条件注释语法。

正如你所看到的,这对于将代码修复应用于旧版本的IE尤其有用。我们前面提到的用例(使旧版本的IE可以使用现代语义元素)可以通过使用条件注释来轻松实现,例如,您可以在IE样式表中添加类似这样的内容:

aside, main, article, section, nav, figure, figcaption {
  display: block;
}

然而,这并不是那么简单 - 您还需要通过JavaScript在DOM中创建您想要样式化的每个元素的副本,让它们变得可以风格化; 这是一个奇怪的怪癖,我们不会在这里让你知道细节。例如:

var asideElem = document.createElement('aside');
 ...

这听起来像是一个痛苦的处理,但幸运的是有一个polyfill可以为您做必要的修复,除此之外 - 请参阅HTML5Shiv了解所有细节(请参阅手动安装以获取最简单的用法)。

选择器支持

 

当然,如果你不使用正确的选择器来选择你想要的样式的话,就没有任何CSS功能可以应用如果您只是错误地写了一个选择器,所以在任何浏览器中的样式都不像预期的那样,您只需要排除故障并找出选择器出了什么问题。我们发现使用浏览器的开发工具来检查你试图设计的元素是有帮助的,然后看一下DOM检查器倾向于提供的DOM树面包屑跟踪,看看你的选择器是否比它有意义。

例如,在Firefox开发工具中,您可以在DOM检查器的底部获得这种输出:

 

例如,如果您尝试使用此选择器,则可以看到它不会根据需要选择输入元素:

form > #date

 

date表单输入不是直接在里面<form>;你最好使用一般的后代选择器而不是子选择器)。

然而,出现在IE 9比旧的版本的另一个问题是,没有任何新的选择(主要是伪类和伪元素如:nth-of-type:not::selection,等)的工作。如果你想在你的CSS中使用这些,并且需要支持较老的IE版本,那么一个好的方法就是使用Keith Clark的Selectivizr库 - 这是一个小型的JavaScript库,可以在现有的JavaScript库(如jQueryMooTools)上工作

 

  1. 要尝试此示例,请创建selectivizr-example-start.html的本地副本如果你看看这个现场直播,你会发现它包含两个段落,其中一个是风格。我们已经选择了这个段落p:first-child,这在老版本的IE中不起作用。
  2. 现在下载  MooToolsSelectivizr,并将它们保存在与示例HTML相同的目录中。
  3. 将下面的代码放到HTML文档的开头,就在开始<style>标记之前
    <script type="text/javascript" src="MooTools-Core-1.6.0.js"></script>
        <!--[if (gte IE 6)&(lte IE 8)]>
          <script type="text/javascript" src="selectivizr-min.js"></script>
        <![endif]-->

如果你尝试在旧版本的IE中运行它,它应该可以正常工作。

处理CSS前缀

CSS前缀带来的另外一个问题是 - 这些是一种用于允许浏览器供应商在技术处于试验状态时实现自己版本的CSS(或JavaScript)特性的机制,所以他们可以使用它来获取它没有与其他浏览器的实现冲突,或者最终的前置实现。举个例子:

  • Mozilla使用 -moz-
  • Chrome / Opera / Safari使用 -webkit-
  • 微软使用 -ms-

这里有一些例子:

-webkit-transform: rotate(90deg);

background-image: -moz-linear-gradient(left,green,yellow);
background-image: -webkit-gradient(linear,left center,right center,from(green),to(yellow));
background-image: linear-gradient(to right,green,yellow);

 

第一行显示了一个transform带有-webkit-前缀属性- 这是在Chrome中使用变换功能所必需的,直到功能定稿,并且这些浏览器添加了该属性的前缀无版本(在撰写本文时,Chrome支持这两个版本)。

最后三行显示了三个不同版本的linear-gradient()函数,用于在元素的背景中生成线性渐变:

 

  1. 第一个有一个-moz-前缀,并显示一个略老的语法版本(Firefox)
  2. 第二个有一个-webkit-前缀,并显示一个更老的专有版本的语法(这实际上是从一个真正的旧版本的WebKit引擎)。
  3. 第三个没有前缀,并显示语法的最终版本(包含在定义此功能CSS图像值和替换内容模块级别3规范中)。

 

前缀功能从来不应该用于生产网站 - 它们可能会在没有警告的情况下更改或删除,并导致跨浏览器问题。当开发人员决定只使用-webkit- 某个属性版本时,这是一个特别的问题- 这意味着该网站在其他浏览器中不起作用。这实际上发生了很多,其他浏览器已经开始实现-webkit-各种CSS属性的前缀版本,所以他们将使用这样的代码。由于这些类型的问题,浏览器供应商使用前缀最近已经下降,但仍然有一些需要注意。

如果您坚持使用前缀功能,请确保使用正确的功能。您可以在MDN参考页面上查找哪些浏览器需要前缀,以及像caniuse.com这样的站点如果你不确定,你也可以直接在浏览器中做一些测试。

试试这个简单的例子:

 

  1. 打开google.com或具有突出标题或其他块级元素的其他站点。
  2. 右键/ Cmd +单击有问题的元素并选择Inspect / Inspect元素(或者浏览器中的任何选项) - 这应该在浏览器中打开开发工具,在DOM检查器中高亮显示该元素。
  3. 寻找可以用来选择该元素的功能。例如,在撰写本文时,主要的Google徽标的ID为hplogo
  4. 将对此元素的引用存储在变量中,例如:
    var test = document.getElementById('hplogo');
  5. 现在尝试为您感兴趣的CSS属性设置一个新的值,你可以使用元素style属性来做到这一点,例如尝试在JavaScript控制台中输入这些:
    test.style.transform = 'rotate(90deg)'
    test.style.webkitTransform = 'rotate(90deg)'

 

当您开始在第二个点之后键入属性名称表示形式(请注意,在JavaScript中,CSS属性名称是以较低的驼峰大小写,而不是连字符),JavaScript控制台应该开始自动填充浏览器中存在的属性的名称并匹配到目前为止所写的内容。这对于找出在该浏览器中实现哪个版本的属性很有用。

在撰写本文时,Firefox和Chrome都实现了-webkit-前缀和非前缀的transform

一旦你找到了你需要支持的前缀,你应该把它们写在你的CSS中,例如:

 

-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);

 

这可以确保所有支持上述任何属性的浏览器都可以使该功能正常工作。值得把非前缀版本放在最后,因为那将是最新的版本,如果可能的话,你会希望浏览器使用它。例如,如果浏览器实现了-webkit-版本和非前缀版本,则它将首先应用-webkit-版本,然后用非前缀版本覆盖它。你希望这样发生,而不是相反。

当然,这样做很多不同的CSS规则可能会变得非常乏味。最好使用自动化工具来为你做。而这样的工具存在:

前缀的JavaScript库可以附加到页面上,并自动检测浏览器查看页面的功能,并根据需要添加前缀。使用起来非常简单方便,虽然它有一些缺点(请参阅上面的链接了解详细信息),但有一点是可争议的,即在您的站点中解析每个样式表并在运行时添加前缀可能会消耗计算机的处理能力为一个大的网站。

另一个解决方案是在开发过程中自动添加前缀,而这个(和其他的东西除外)可以使用像AutoprefixerPostCSS这样的工具完成这些工具可以以多种方式使用,例如Autoprefixer有一个在线版本,允许您在左侧输入非前缀CSS,并在右侧给出前缀添加版本。您可以使用Autoprefixer选项中列出的符号来选择要确保支持的浏览器另请参阅基于此的Browserslist查询以获取更多详细信息。例如,以下查询将选择所有主流浏览器的最后2个版本和 IE9 以上的版本。

 

last 2 versions, ie > 9

 

Autoprefixer也可用于其他更便捷的方式 - 请参阅Autoprefixer使用情况例如,您可以使用任务运行器/构建工具(如GulpWebpack)在开发完成后自动添加前缀。(解释这些工作如何超出本文的范围。)

您也可以使用插件来编辑文本编辑器,如Atom或Sublime文本。例如,在Atom中:

  1. 您可以通过转到首选项>安装,搜索Autoprefixer,然后安装。
  2. 您可以通过按“Autoprefixer 设置”按钮并在页面“设置”部分的文本字段中输入查询来设置浏览器查询
  3. 在你的代码中,你可以选择要添加前缀的CSS部分,打开命令调色板(Cmd / Ctrl + Shift + P),然后输入Autoprefixer并选择Autoprefixer自动完成的结果。

作为一个例子,我们输入了下面的代码:

 

body {
  display: flex;
}

我们突出显示了它,并运行Autoprefixer命令,并用以下代码替换它:

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

布局问题

 

另一个可能出现的问题是浏览器之间布局的差异。从历史上看,这往往是一个更大的问题,但是最近,现代浏览器倾向于更一致地支持CSS,布局问题往往更倾向于:

  • 对现代布局功能缺乏(或不同)支持。
  • 布局在移动浏览器中看起来不太好(即响应式设计问题)。

 

注意:过去,web开发人员使用CSS文件(称为重置),它删除了应用于HTML的所有默认浏览器样式,然后将自己的样式应用于顶部的所有样式 - 这样做是为了使项目的样式更加一致,并减少可能的跨浏览器问题,特别是像布局的东西。然而现在它更被视为过度杀伤力。我们现在最好的等价物是normalize.css,这一个整齐的CSS,在默认的浏览器样式上略微增加一点,使事情更加一致,并解决一些布局问题。建议您将normalize.css应用于所有的HTML页面。

注意:当试图追踪一个棘手的布局问题,一个好方法是添加一个明亮的颜色outline到有问题的元素,或附近的所有元素。这使得更容易看到一切放置在哪里。请参阅使用大纲可视化调试您的CSS以获取更多详细信息。

支持新的布局特性

 

今天网络上的大部分布局工作都是使用浮动工具完成的- 这是因为浮动支持得很好(可以回到IE4,尽管如此,如果您尝试支持IE,也需要调查一些错误很久以前)。但是,它们并不是真正用于布局的目的 - 使用浮动的方式实际上是一种黑客攻击 - 而且它们有一些严重的限制(例如,请参阅为什么选择Flexbox?

最近,出现了专门的布局机制,例如FlexboxCSS Grids,这些布局机制使常见的布局任务变得更加容易并消除了这些缺点。但是,这些在浏览器中并没有得到很好的支持:

  • CSS网格是非常新的; 在撰写本文的时候,他们只是在最新版本的现代浏览器中才得到支持
  • Flexbox 在现代浏览器中得到很好的支持,但是在旧版浏览器中却存在问题。IE 9根本不支持它,IE 10和旧版本的iOS /桌面Safari分别支持Flexbox规范的不兼容老版本。如果您想尝试在所有这些浏览器上使用flexbox(请参阅高级跨浏览器Flexbox以获得创意),则会导致一些有趣的浏览器前缀杂乱

布局功能并不像简单的颜色,阴影或渐变那样容易提供优雅的后备。如果布局属性被忽略,你的整个设计可能会崩溃。因此,您需要使用功能检测来检测访问的浏览器是否支持这些布局功能,并根据结果有选择地应用不同的布局(我们将在后面的文章中详细介绍功能检测)。

例如,您可以将flexbox布局应用于现代浏览器,然后将浮动布局应用于不支持flexbox的旧浏览器。

 

注意:CSS中有一个相当新的特性@supports,它允许你实现原生特征检测测试。

响应式设计问题

 

响应式设计是创建网页布局以适应不同设备形式因素(例如不同的屏幕宽度,方向(纵向或横向)或分辨率)的做法。例如桌面布局在移动设备上看起来会很糟糕,所以您需要使用媒体查询来提供合适的移动布局,并确保使用视口正确应用它您可以在响应式设计的构建模块中找到这些实践的详细说明

解决方案也是一个大问题 - 例如,移动设备不太可能需要比台式电脑大的图像,并且更可能具有较慢的互联网连接,并且甚至可能使昂贵的数据计划浪费带宽成为更多的问题。另外,不同的设备可以具有一系列不同的分辨率,这意味着较小的图像可以出现像素化。有许多技术可以让您解决这些问题,从简单的移动第一媒体查询到更复杂的响应式图像技术

可能出现问题的另一个困难是浏览器对使上述技术成为可能的特征的支持。媒体查询没有在IE 8或更少的支持,所以如果你想使用移动第一布局和具有桌面布局则适用于旧版本的IE,你将有一个媒体查询应用于填充工具到您的网页,如css3- mediaqueries-jsRespond.js

 

寻找帮助

 

HTML和CSS还有很多其他的问题。要知道最重要的是如何在网上找到答案。

其中最好的支持信息来源是Mozilla开发者网络(这就是你现在的位置!),stackoverflow.comcaniuse.com

要使用Mozilla开发人员网络(MDN),大多数人会搜索他们正在尝试查找信息的技术,以及术语“mdn”,例如“mdn HTML5 video”。MDN包含几种有用的内容类型:

caniuse.com提供支持信息,以及一些有用的外部资源链接。例如,请参阅http://caniuse.com/#search=video(您只需在文本框中输入要搜索的功能)。

stackoverflow.com(SO)是一个论坛网站,您可以提出问题,并让开发人员分享他们的解决方案,查看以前的帖子,并帮助其他开发人员。在发布新问题之前,建议您先看看是否已经回答了您的问题。例如,我们在SO上搜索了“cross browser html5 video”,并且很快推出了具有完全跨浏览器兼容性的HTML5 Video

除此之外,请尝试搜索您最喜爱的搜索引擎来解决您的问题。如果有的话,搜索特定的错误信息通常很有用 - 其他开发人员可能会遇到与您一样的问题。

 

总结

现在您应该熟悉Web开发中遇到的跨浏览器HTML和CSS问题的主要类型,以及如何解决这些问题。

文档标签和贡献者

此页面的贡献者: fisker, ziyunfei, yihongxian, liminjun
最后编辑者: fisker,