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

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

js怎么生成dom元素呢？？忘了

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

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

解决上述问题方案
1.。一个好的策略是在桌面/移动设备上测试几个现代的浏览器，以确保您的代码正常工作，然后才能专注于跨浏览器问题。

在解决问题前 我们先来知道一些基础的， HTML调试 和css调试

1. html调试

通常当你写错代码的时候，你会遇到以下两种主要类型的错误：

语法错误:
由于拼写错误导致程序无法运行，就像上面Rust的例子. 修正这些错误是没问题的，只要你熟悉正确的使用工具和知道错误信息的意思。
逻辑错误:
实际上语法是正确的，但代码不是你想要的，这意味着程序运行不正确. 逻辑错误通常比语法错误更难修复，因为没有一个错误信息指示你到错误的来源。

HTML本身不容易因语法错误出错，因为浏览器是以宽松模式来运行，这意味着即使出现语法错误浏览器依然会运行。浏览器通常都有自己的规则来解析语法错误的标记语言，所以程序仍然会运行，尽管可能不是你预期的样子。这样当然仍然会带来问题。

注意: HTML可以自由的运行，是因为在 Web 创建之初，它的宗旨就是：允许人们获取他们发布的内容比确保所有语法完全正确更重要。如果当初 Web 在一开始就更加严格的话，也许 Web 就不会像今天这样流行了。

主动学习: 学习宽容式代码风格

使用开发者模式下的审查器，可以非常清楚地看到浏览器尝试修补我们的代码错误（下面是火狐浏览器中的情况，其他浏览器也会进行修补）

这就是宽容式代码风格

如果一些非常小的错误，稍微浏览一下自己的代码就可以发现，但是如果是一个非常庞大、复杂的HTML文档呢？

最好的方法就是让你的HTML页面通过 Markup Validation Service — 由W3C创立并维护的，这个网站紧跟定义 HTML，CSS，和其他网络技术的具体内容. 这个网页将 HTML 文档作为输入,并运行 ，然后给你一个报告告诉你你的 HTML 有哪些错误.
为了确定需要验证的HTML，你可以输入一个指向该HTML页面的网址，或者上传一份HTML文件，或者直接输入一些HTML代码。

经验：
如果你不能一次弄懂所有的错误，别着急，你可以试试先修复那些你已经弄懂的错误，然后再申请验证，看看剩下的错误是哪些。有时候最先修复的错误可能让你摆脱了后面一系列的错误——因为一个小问题可能引发好几个错误，就像连锁反应。

css调试
就像HTML一样，CSS是宽容的（在继续阅读前阅读宽容代码。）在CSS的情况下，如果一个声明是无效的（包含语法错误，或者浏览器不支持该特性），浏览器完全忽略了它，然后转向它找到的下一个。

如果选择器是无效的，那么它就不会选择任何东西，而整个规则也不会再做任何事情，浏览器只会继续执行下一个规则。

这在很多情况下都是很好的，在大多数情况下，你的内容会显示给你的用户，即使它不是很正确。但是，当您试图调试这个问题时，这并不是很有帮助，您甚至没有得到任何错误消息来帮助您找到它。当你的用户无法看到内容的时候，这就更令人头疼了——也许关键的风格没有被应用，导致布局出现了严重的错误？

现在，所有的web浏览器都提供了帮助您检查和理解web页面的开发工具。在他们提供的各种工具中，有两种可以在所有浏览器中使用:DOM检查器和CSS编辑器，它们都可以在Firefox的page inspector tool中找到。我们已经在调试HTML中查看了DOM检查器，以及如何使用它来检查HTML。在这里，我们将看到这个和CSS编辑器，以及如何将它们一起使用来调试CSS问题。

让我们开始用页面检查器的特性来研究页面。在火狐中你可以使用 Cmd/Ctrl + I 打开页面检查器（或者通过在菜单中选择Tools > Web Developer > Inspector）

如果单击左边的DOM检查器中的一个元素，右边的CSS编辑器将更新显示应用到该元素的所有CSS规则。这是非常有用的，特别是当任何无效的属性出现在它们的一行和旁边的一个警告符号的时候。这将会很方便！

CSS 验证

我们已经看到了W3C HTML验证器，但是它们也有一个CSS验证器。它的工作方式是相同的，允许您在特定的URL上验证CSS，通过上传本地文件，或者直接使用CSS输入。

你可能会认为这没浏览器开发工具有用——它不允许您在引用错误的情况下查看已呈现的代码，如果选择器是不正确的，或者语法是正确的，并且您只是为您的设计选择了一个不正确的值，那么这就不好了。但是，我们认为对于一个大型的样式表，首先要通过这个服务来消除任何基本的语法错误，然后再依赖浏览器开发人员工具来确定其他问题。

注意：CSS Lint是一个类似的工具，用于验证CSS和发现错误，它也可以提供一些有用的提示并给出有趣的警告。

[常见的跨浏览器问题]

旧版浏览器不支持新特性

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

对于跨浏览器表单，依靠简单的表单元素，或者选择性地使用高级表单元素来支持浏览器，或者使用提供体面的跨浏览器表单小部件（如jQuery UI或Bootstrap datepicker）的库可能会更好。

布局问题