2

我正在使用 Html&Css、Php 和 MySql 编写我的第一个博客。

在编写“style.css”代码时，我在网上搜索了任何有用的教程，并且在我阅读的每一篇文章中：关于 Internet Explorer 和 Mac 的注释相同，例如：

/* IE5 Mac Hack \*/ 
/*/ 
#main-nav { padding-left: 11px; overflow: hidden; } 
/* End Hack */

因此，我阅读了一些关于 IE 与 Css 的问题的文章，并找到了描述它的很棒的网站，例如：

http://www.webcredible.co.uk/user-friendly-resources/css/internet-explorer.shtml

但是，即使在阅读了这么多文章\网站之后，我仍然是一个不完全了解如何确保我的博客在每个浏览器上都能正常工作的初学者（例如 IE5\6\7、chrome\firefox\mozilla\opera ..等.) ?!

是否有我必须涵盖（照顾）的常见 Browser\Css 问题？

提前致谢。

4

6 回答 6

4

没有为人类已知的每个浏览器编写代码，在每个操作系统上都没有办法证明你的 CSS/HTML 或其他客户端脚本可以在每个浏览器中完全一样地工作，我不在乎你是否在 Mac 上， Linux、微软、Chrominum 等。每个操作系统都有自己的怪癖，每个浏览器和每个操作系统的浏览器版本也是如此。

但是就像其他人指出的那样，除了你做一些非常复杂的事情，几乎所有标准的 CSS xx 和 HTML xx 和 JavaScript 都可以在所有新旧浏览器上正常工作，你肯定会遇到偶尔的打嗝，但同样没有解决这个问题，在我作为开发人员的时候，我认为避免 css “hacks”作为尝试补偿每个浏览器需求的措施，这些浏览器需要通过 php/javascript 使用浏览器检测并提供替代版本特定于该浏览器支持的问题。

还要在您的网站上某个地方知道您在开发中支持哪些浏览器。如果您刚刚开始学习大多数文档，您会发现在以后的几年中将涵盖 CSS3 和 CSS2 以及 HTML5（这与 4 几乎相同，但有一些增强）。因此，在这一天学习起来几乎很容易，您可能会轻松支持 IE 8+、Chrome 10+、Firefox 4+、Opera 8+.. 并且您最大的宝座将是仍在使用 IE 7 的人, 或 Firefox 3-13.5

至于常见的问题，那是一个棘手的问题。虽然我认为最大的一个是位置样式。当谈到固定和绝对时，例如 IE 不喜欢固定位置或者它是绝对的，它的一个或另一个。但通常处理从 DOM 流中分离元素的任何事情都是常见的。在一些旧浏览器中，边距和填充的处理方式也不同。总而言之，如果您非常担心 css/html 和其他客户端脚本并支持尽可能多的浏览器，那么您最终会得到一个非常单调的网站，并且最终会因崩溃而陷入困境。选择一组浏览器，支持这些浏览器，并为自己省点麻烦。

于 2012-07-27T17:25:57.627 回答
3

您可以在此处查看 CSS 浏览器支持图表

这让您知道哪个浏览器支持什么。您可以制作多个 css 文件并根据浏览器切换它们。

于 2012-07-27T17:16:23.903 回答
2

当您使用 IE9（我也认为是 10）时，在页面上按 F12，它将显示控制台（就像在 chrome 中一样）。控制台实际上有一个功能，您可以选择查看页面，就像在 IE 6、7、8 或 9 中查看的一样。它并不完美，但它非常好。

至于您使用的实际属性和选择器，如果您是初学者，我建议您慢慢来，在使用之前查看每个选择器和属性，并运行快速搜索以找出任何兼容性问题/解决方法.

您还应该记住的一件事是，有时，尽管我们尽最大努力将其最小化，但有些东西无法在那个过时的浏览器（通常是 IE 浏览器）中呈现。这并不总是意味着您永远不应该将这些内容包含在另一个页面中-查看如何在这些情况下制作特定于浏览器的代码和样式-但同时，请确保您没有制作两个完全不同的页面.

尤其是当你刚开始的时候，尽你所能尝试一切，尽你所能。要有创意，最重要的是，玩得开心！

PS 我的第一个完整站点也是一个博客站点（PHP、MySQL、HTML、CSS）。:)

于 2012-07-27T17:28:39.183 回答
2

除非你正在做更复杂的 CSS，否则现在大多数东西都可以跨浏览器运行，没有任何问题。您可以使用http://caniuse.com/获取特定的支持详细信息，PPK 的站点 ( http://quirksmode.org/ ) 提供了有关旧浏览器中更多基本支持的信息。

至于在旧版本的 Internet Explorer 中测试，您可以使用微软提供的虚拟机：https ://www.microsoft.com/en-us/download/details.aspx?id=11575

于 2012-07-27T17:15:05.927 回答
1

根据我的经验，唯一真正知道的方法是自己测试。在大多数情况下，您不应该遇到任何问题，而且通常当您这样做时，它们并不是什么大问题。我还了解到，一起“破解”事物可能看起来是最简单/最好的做事方式，而实际上它只是你身边糟糕的 CSS 可以调整的。话虽如此，您绝对有无法绕过它的时候，这就是野兽的本性。对我来说，最大的麻烦来自于 div。随着您作为开发人员的成长，您将毫无疑问地了解每次都能有效的方法，以及您必须一遍又一遍地测试才能正确的方法。这只是一个实践问题。话虽如此，只要您保持设计简洁明了，就不会太难。

于 2012-07-27T17:15:58.187 回答
1

您可以使用Adob​​e browserlab试验您的 css 并测试每个浏览器上的差异。我建议尝试您的 css 以及您在互联网上找到的内容，然后测试与 browserlab 的兼容性。

据我了解，它是 adobe 的一项补充服务，所以试试吧！

如果这不起作用，您也可以尝试http://browsershots.org/，虽然我从未使用过它，但它应该可以满足您的要求。

于 2012-07-27T17:18:10.237 回答