HTML和CSS的麻烦

HTML和CSS的一些麻烦在于这两种语言都相当简单，并且开发人员通常不会认真对待它们，因为在确保代码是精心设计，高效和语义描述的目的方面， 功能。 在最坏的情况下，JavaScript用于生成整个网页内容和样式，这使得您的网页无法访问，性能较差(生成DOM元素很昂贵)。 在其他情况下，不支持跨浏览器一致的新生功能，这可能使某些功能和样式不适用于某些用户。 响应式设计问题也很常见 - 在桌面浏览器中看起来不错的网站可能会在移动设备上提供可怕的体验，因为内容太小，无法阅读，或者网站由于昂贵的动画而缓慢。

让我们来看看如何减少HTML / CSS导致的跨浏览器错误。

第一件事:固定一般问题

我们在本系列的第一篇文章中说，开始的一个好策略是在桌面设备/移动设备上的几个现代浏览器中进行测试， 在继续专注于跨浏览器问题之前，请确保您的代码正常工作。

在我们的调试HTML 和调试CSS 文章中，我们提供了一些关于 调试HTML / CSS - 如果你不熟悉基本知识，你应该肯定的学习这些文章，然后继续。

基本上，这是一个问题，检查你的HTML和CSS代码是否正确，并且不包含任何语法错误。

验证

对于HTML，验证涉及确保所有代码正确关闭和嵌套，您使用的是DOCTYPE，并且您正在使用代码的正确目的。 一个好的策略是定期验证您的代码。 可以执行此操作的一项服务是W3C 标记验证服务，可让您指向代码 ，并返回错误列表:

CSS有一个类似的故事 - 您需要检查您的属性名称拼写正确，属性值拼写正确，并对它们使用的属性有效，您不会丢失任何花括号，等等。 为此，W3C还提供了 CSS Validator 。

短绒

另一个很好的选择是所谓的Linter应用程序，它不仅指出错误，而且还可以在CSS中标记有关坏做法的警告，以及其他点。 通常可以定制棉花，以在其错误/警告报告中更严格或更轻松。

有许多在线linter应用程序，其中最好的可能是脏标记(HTML，CSS，JavaScript)和 CSS Lint (仅限CSS)。 这些允许您将代码粘贴到窗口中，它会标记任何错误的十字架，然后可以被徘徊以获得错误消息通知您的问题是什么。 脏标记还允许您使用清除按钮修复您的标记。

0px auto; width:1204px;" alt ="">

然而，将代码复制并粘贴到网页上以检查其有效性几次并不是很方便。 你真正想要的是一个linter，将适合你的标准工作流程，最少的麻烦。

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

1. Install Atom (if you haven't got an up-to-date version already installed) — download it from the Atom page linked above.
2. Go to Atom's Preferences... dialog (e.g. by Choosing Atom > Preferences... on Mac, or File > Preferences... on Windows/Linux) and choose the Install option in the left hand menu.
3. In the Search packages text field, type "lint" and press Enter/Return to search for linting-related packages.
4. You should see a package called lint at the top of the list. Install this first (using the Install button), as other linters rely on it to work. After that, install the linter-csslint plugin for linting CSS, and the linter-tidy plugin for linting HTML.
5. After the packages have finished installing, try loading up an HTML file and a CSS file: you'll see any issues highlighted with green (for warnings) and red (for errors) circles next to the line numbers, and a separate panel at the bottom provides line numbers, error messages, and sometimes suggested values or other fixes.

alt =""> "。 alt ="">

其他流行的编辑有类似的linting包可用。 例如，请参阅:

• SublimeLinter for Sublime Text
• Notepad++ linter

浏览器开发工具

大多数浏览器中内置的开发工具还提供了有用的工具来捕获错误，主要是CSS。

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

alt ="">

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

常见的跨浏览器问题

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

旧版浏览器不支持现代功能

这是一个常见的问题，特别是当您需要支持旧的浏览器(如旧的IE版本)或您使用的功能使用CSS前缀实现。 一般来说，大多数核心的HTML和CSS功能(例如基本HTML元素，CSS基本颜色和文本样式)可以在大多数浏览器中使用; 当您开始使用较新的功能(例如 Flexbox 或 -CN / docs / Web / Apps / Fundamentals / Audio_and_video_delivery"> HTML5视频/音频，甚至更新生， CSS网格或 -webkit-background-clip:text 。

一旦确定了您将使用的潜在问题技术列表，最好研究其支持的浏览器，以及相关技术是否有用。 请参见下面的查找帮助。

HTML fallback behaviour

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

无法识别的HTML元素被浏览器视为匿名内联元素(实际上没有语义值的内联元素，类似于 span"> < span> 元素)。 你仍然可以通过他们的名字引用它们，并用CSS样式，例如 - 你只需要确保它们是你想要的，例如设置 display:block; 在所有 的新语义元素(例如 < article> / a>， < aside> ， 等等)，但只在旧版本的IE不能识别它们(所以，IE 8和更低)。 这样新的浏览器可以正常使用的代码，但旧的IE版本将能够对这些元素进行风格。

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

例如:

<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>

此示例(摘自创建跨浏览器视频播放器)包括 不仅是老版本的Flash视频回退，还有一个简单的链接，允许您下载视频，即使Flash播放器不工作，因此至少用户仍然可以访问视频。

HTML5表单元素还会显示回退质量 - HTML5引入了一些特殊的 < input> / a> 类型，用于将特定信息输入到表单中，例如时间，日期，颜色，数字等。这些非常有用，特别是在移动平台上，其中提供输入数据的无痛方式非常重要 为用户体验。 支持平台在使用这些输入类型时提供特殊的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>

该代码的输出如下:

label {
        float: left;
        width: 30%;
        text-align: right;
      }

      input {
        float: right;
        width: 65%;
      }

      label, input {
        margin-bottom: 20px;
      }

      div {
        clear: both;
        margin: 10px;
      }

      body {
        width: 400px;
        margin: 0 auto;
      }

<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>

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

注意:当然，这可能不是一个伟大的解决方案为您的项目的需要 - 视觉呈现的差异不是很大，加上很难保证数据将以您想要的格式输入。对于跨浏览器窗体， 它可能更好地依赖于简单的表单元素，或选择性地使用高级表单元素只支持浏览器，或使用一个库提供体面的跨浏览器窗体小部件，如 class ="external"> jQuery UI 或 Bootstrap datepicker 。

CSS fallback behaviour

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

让我们来看一个例子 - 一个简单的CSS样式的CSS，它有一些样式由各种CSS3功能提供:

alt ="">

该按钮有许多样式的声明，但我们最感兴趣的两个如下:

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 /developer.mozilla.org/zh-CN/docs/Web/CSS/background-color"> background-color ，可更改悬停时的不透明度，以向用户提示按钮 是交互式的，以及一些半透明插图 box-shadow / a>阴影给按钮一些纹理和深度。 麻烦的是，RGBA颜色和盒子阴影不担心IE版本9以上 - 在旧版本的背景只是不会显示出来，所以文本将是不可读的，没有什么好！

alt ="">

为了对此进行排序，我们添加了第二个 background-color 声明，它只是指定了一个十六进制颜色 - 这在真正的旧浏览器中是支持的，如果现代闪亮的特性 不工作。 发生什么是浏览器访问此页面首先应用第一个 background-color 值; 当它到达第二个 background-color 声明时，如果它支持RGBA颜色，它将用此值覆盖初始值。 如果没有，它将忽略整个声明并继续。

IE conditional comments

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 表示"小于或等于"，但您也可以对NOT和其他逻辑语法使用lt，gt，gte，！。

正如你可以看到，这是特别有用的应用代码修复旧版本的IE。 我们之前提到的用例(使旧的IE版本中的现代语义元素可以风格化)可以使用条件注释轻松实现，例如你可以在你的IE样式表中放置这样的东西:

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

它不是那么简单，但是 - 你还需要创建一个每个元素的你想要在DOM中通过JavaScript风格的副本，为他们的风格; 这是一个奇怪的怪癖，我们不会介绍这里的细节。 例如:

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

这听起来很痛苦，但幸运的是有一个 polyfill 可用，为您提供必要的修复程序等等 - 请参阅 HTML5Shiv 了解所有详细信息(请参阅 href ="https://github.com/aFarkas/html5shiv#manual-installation"class ="external">手动安装，以获得最简单的用法)。

Selector support

当然，如果您不使用正确的选择器来选择要创建样式的元素，则不会应用任何CSS功能！ 如果你只是写一个选择器不正确，所以造型不是预期在任何浏览器，你只需要排除故障，找出你的选择器有什么问题。 我们发现，使用浏览器的开发工具检查您尝试创建的元素是有帮助的，然后查看DOM检查器倾向于提供的DOM树面包屑跟踪，看看选择器是否有意义。

例如，在Firefox开发工具中，您会在DOM检查器的底部得到这种输出:

alt ="">

例如，如果您试图使用此选择器，您将能够看到它不会根据需要选择输入元素:

form > #date

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

然而，在9以前版本的IE中出现的另一个问题是没有一个更新的选择器(我们主要谈论伪类和伪元素，如 .org / zh-CN / docs / Web / CSS /:nth-of-type">:nth-of-type ， mozilla.org/zh-CN/docs/Web/CSS/:not\">:not ， / docs / Web / CSS / :: selection"> :: selection 等)如果你想在CSS中使用这些，你需要支持旧的IE版本，一个好的举动是 使用Keith Clark的 Selectivizr 库 - 这是一个小型JavaScript库，可在现有JavaScript库(如 "http://jquery.com/"class ="external"> jQuery 或 MooTools 。

1. To try this example, make a local copy of selectivizr-example-start.html. If you look at this running live, you'll see that it contains two paragraphs, one of which is styled. We've selected the paragraph with p:first-child, which won't work in old versions of IE.
2. Now download MooTools and Selectivizr, and save them in the same directory as your sample HTML.
3. Put the following code into the head of your HTML document, just before the opening <style> tag:

   <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，它应该工作正常。

margin:0px auto; width:771px;" alt ="">

Handling CSS prefixes

另一组问题来自CSS前缀 - 这些是一个机制，或者通常用于允许浏览器供应商实现自己的版本的CSS(或JavaScript)功能，而技术处于实验状态，所以他们可以玩它，并得到它 没有与其他浏览器的实现，或最终的无前缀的实现冲突。 例如:

• Mozilla uses -moz-
• Chrome/Opera/Safari use -webkit-
• Microsoft uses -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() a> 函数，用于在元素的背景中生成线性渐变:

1. The first one has a -moz- prefix, and shows a slightly older version of the syntax (Firefox)
2. The second one has a -webkit- prefix, and shows an even older, proprietary version of the syntax (this is actually from a really old version of the WebKit engine).
3. The third one has no prefix, and shows the final version of the syntax (included in the CSS Image Values and Replaced Content Module Level 3 spec, which defines this feature).

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

如果您坚持使用前缀功能，请确保使用正确的功能。 您可以在MDN参考页以及 caniuse.com 等网站上查找哪些浏览器需要前缀。 如果你不确定，你也可以通过直接在浏览器中进行一些测试来发现。

尝试这个简单的例子:

1. Open up google.com, or another site that has a prominent heading or other block level element.
2. Right/Cmd + click on the element in question and choose Inspect/Inspect element (or whatever the option is in your browser) — this should open up the dev tools in your browser, with the element highlighted in the DOM inspector.
3. Look for a feature you can use to select that element. For example, at the time of writing, the main Google logo had an ID of hplogo.
4. Store a reference to this element in a variable, for example:

   var test = document.getElementById('hplogo');

5. Now try to set a new value for the CSS property you are interested in on that element; you can do this using the style property of the element, for example try typing these into the JavaScript console:

   test.style.transform = 'rotate(90deg)'
   test.style.webkitTransform = 'rotate(90deg)'

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

撰写本文时，Firefox和Chrome都实现了 ="https://developer.mozilla.org/zh-CN/docs/Web"的 -webkit - 前缀和非前缀版本 / CSS / transform"> transform ！

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

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

这可以确保所有支持上述任何形式的属性的浏览器都能使该功能正常工作。 这是值得把非前缀的版本最后，因为这将是最新的版本，你会希望浏览器使用，如果可能的话。 如果例如浏览器实现 -webkit - 版本和非前缀版本，它将首先应用 -webkit - 版本， 前缀版本。 你希望它以这种方式发生，而不是反过来。

当然，这样做对很多不同的CSS规则可以得到真的很乏味。 最好使用自动化工具为您完成。 并且存在这样的工具:

免费前缀JavaScript库可以附加到网页上，并且会自动检测所拥有的功能 浏览器查看页面并根据需要添加前缀。 它真的很容易和方便使用，虽然它有一些缺点(请参阅上面的链接的详细信息)，可以说，解析您的网站中的每个样式表，并在运行时添加前缀可能会耗尽计算机的处理能力 为大型网站。

Autoprefixer\">另一种解决方案是在开发过程中自动添加前缀，而且(以及其他一些事情)可以使用 Autoprefixer and PostCSS.\">a>和 PostCSS 。online version that allows you to enter your\">这些工具可以通过多种方式使用，例如Autoprefixer有一个在线版本，允许您输入您的非前缀CSS在左边，并给你一个前缀添加版本在右边。Autoprefixer options;\">您可以使用自动填充程序选项中列出的符号选择要确保支持的浏览器;Browserslist queries, which this is based on, for more detail.\">也可以参阅 Browserslist查询(详细信息请参阅此链接)。例如，以下查询将选择所有主要浏览器的最后2个版本和9以上的IE版本。

last 2 versions, ie > 9

Autoprefixer也可以通过其他更方便的方式使用 - 请参见自动前贴片使用。 例如，您可以使用任务运行程序/构建工具(如 Gulp 或 webpack.github.io/"class ="external"> Webpack ，以便在开发完成后自动添加前缀。 (解释这些工作如何超出了本文的范围。)

您还可以为文本编辑器(如Atom或Sublime文本)使用插件。 例如，在Atom:

1. You can install it by going to Preferences > Install, searching for Autoprefixer, then hitting install.
2. You can set a browser query by pressing the Autoprefixer Settings button and entering the query in the text field in the Settings section on the page.
3. In your code, you can select sections of CSS you want to add prefixes to, open the command pallette (Cmd/Ctrl + Shift + P), then type in Autoprefixer and select the Autoprefixer result that autocompletes.

例如，我们输入了以下代码:

body {
  display: flex;
}

我们突出显示它并运行Autoprefixer命令，并将其替换为:

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

布局问题

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

• Lack of (or differences in) support for modern layout features.
• Layouts not looking good in mobile browsers (i.e. responsive design problems).

Support for new layout features

今天在网络上的大部分布局工作都是使用浮动广告完成的 - 这是因为浮动广受支持(回到IE4，尽管有多个 bug，如果你试图支持IE，那么也需要调查)。 然而，他们并不是真正意味着布局的目的 - 使用浮动我们所做的是真正的黑客 - 他们有一些严重的限制(例如，参见 / docs / Learn / CSS / CSS_layout / Flexbox#Why_Flexbox">为什么选择Flexbox？)

最近，出现了专用布局机制，如 Flexbox 和 CSS网格 ，这使得常见的布局任务更容易，并消除这样的缺点。 然而，这些不是在浏览器中支持:

• CSS grids are very new; at the time of writing, they were only supported in the very newest versions of modern browsers.
• Flexbox is well-supported in modern browsers, but provides problems in older browsers. IE 9 doesn't support it at all, and IE 10 and old versions of iOS/desktop Safari respectively support incompatible old versions of the flexbox spec. This results in some interesting browser prefix juggling if you want to try to use flexbox across all these browsers (see Advanced Cross-Browser Flexbox to get an idea).

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

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

Responsive design problems

响应式设计是创建改变以适应不同设备形状因素的网络布局的实践 - 例如不同的屏幕宽度，方向(纵向或横向)或分辨率。 例如，当在移动设备上查看时，桌面布局会显得很糟糕，因此您需要使用 Media_Queries">媒体查询，并确保使用视口 >。 您可以在响应式设计的构建块中找到此类实践的详细帐户。 a>。

分辨率也是一个大问题 - 例如，移动设备不太可能需要比台式机更大的图像，并且更可能有较慢的互联网连接，甚至可能是昂贵的数据计划，浪费带宽更多的问题。 此外，不同的设备可以具有一定范围的不同分辨率，这意味着较小的图像可能出现像素化。 有许多技术可以解决这些问题，从简单的移动第一媒体查询到更复杂的 href ="/ webstart / Multimedia_and_embedding / Responsive_images#Resolution_switching_Different_sizes">响应式图像技术。

可以呈现问题的另一个困难是对使得上述技术成为可能的特征的浏览器支持。 媒体查询不支持在IE 8或更少，所以如果你想使用移动第一布局，并具有桌面布局，然后应用于旧的IE版本，你必须应用媒体查询 /developer.mozilla.org/zh-CN/docs/Glossary/polyfill"class ="glossaryLink"> polyfill 到您的网页，例如 p / css3-mediaqueries-js /"class ="external"> css3-mediaqueries-js 或响应 .js 。

寻找帮助

还有许多其他问题你会遇到的HTML和CSS; 最重要的事情，知道真正是如何在网上找到答案。

最好的支持信息来源是Mozilla开发者网络(即您现在的位置！)， stackoverflow.com 和 caniuse.com 。

要使用Mozilla开发者网络(MDN)，大多数人通过搜索引擎搜索他们正在尝试查找信息的技术，加上术语"mdn"，例如"mdn HTML5 video"。 MDN包含几种有用的内容类型:

• Reference material with browser support information for client-side web technologies, e.g. the <video> reference page.
• Other supporting reference material, e.g. Media formats supported by the HTML audio and video elements.
• Useful tutorials that solve specific problems, for example Creating a cross-browser video player.

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

stackoverflow.com (SO)是一个论坛网站，您可以在其中提出问题，并让开发人员分享他们的解决方案，查找以前的 帖子，并帮助其他开发人员。 建议您在发布新问题之前查看是否有您的问题的答案。 例如，我们在SO上搜索"跨浏览器html5视频"，很快就提出了 兼容性"class ="question-hyperlink external">具有全面浏览器兼容性的HTML5视频。

除此之外，尝试搜索您最喜欢的搜索引擎以找到您的问题的答案。 搜索特定的错误消息通常是有用的，如果你有他们 - 其他开发人员可能会有与你一样的问题。

概要

现在，您应该熟悉在Web开发中遇到的跨浏览器HTML和CSS问题的主要类型，以及如何修复它们。