Css和不同的浏览器问题

时间:2012-07-27 17:10:49

标签: php html css coding-style

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

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

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

所以我读了一些关于Css的IE问题的文章,并找到了很好的网站描述它:

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

但是,即使在阅读了如此多的文章\网站之后,我仍然是一个没有完全明白如何确保我的博客在每个浏览器上工作的人(例如IE5 \ 6 \ 7,chrome \ firefox \ mozilla \ opera) ..等等)?!

我是否有一个常见的Browser \ Css问题需要解决(照顾)?

提前致谢。

6 个答案:

答案 0 :(得分:4)

没有为人类已知的每个浏览器编写代码,在每个操作系统上都没有办法愚弄你的CSS / HTML或其他客户端脚本,以便在每个浏览器上完全相同,我不在乎你是否在Mac,Linux,Microsoft,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和其他客户端脚本以及尽可能多的浏览器,你最终会得到一个非常单调的网站,并最终会因为分解而陷入庇护。选择一组浏览器,支持那些浏览器,并为自己省去一些麻烦。

答案 1 :(得分:3)

您可以看到CSS浏览器支持图表here

这可以让您知道哪个浏览器支持哪些内容。您可以根据浏览器制作多个css文件并进行切换。

答案 2 :(得分:2)

除非你正在做更复杂的CSS,否则大多数东西都可以在浏览器中运行,而这些日子并没有任何问题。您可以使用http://caniuse.com/获取特定的支持详细信息,PPK的网站(http://quirksmode.org/)包含有关旧版浏览器中更多基本支持的信息。

对于旧版Internet Explorer中的测试,您可以使用Microsoft提供的虚拟机:https://www.microsoft.com/en-us/download/details.aspx?id=11575

答案 3 :(得分:2)

当你在IE9中(我也认为10)时,在页面上点击F12它会显示控制台(就像在chrome中一样)。控制台实际上有一个功能,您可以选择查看页面,因为它将在IE 6,7,8或9中查看。它并不完美,但它非常好。

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

你还应该记住的一件事是偶尔,尽管我们尽可能地尽量减少它,但有些东西不能在那个过时的浏览器(最常见的是IE浏览器)中呈现。这并不总是意味着你永远不应该将这些东西包含在另一个页面中 - 查看如何在这些情况下制作特定于浏览器的代码和样式 - 但同时要确保你没有制作两个完全不同的页面。

特别是当你刚开始时,尽可能尝试一切,并尽可能地玩。要有创意,最重要的是,要有它的乐趣!

P.S。我的第一个完整网站也是一个博客网站(PHP,MySQL,HTML,CSS)。 :)

答案 4 :(得分:1)

根据我的经验,唯一真正知道的方法是自己测试。在大多数情况下,你不应该遇到任何问题,通常当你这样做时,他们不是那么大的交易。我也已经了解到,将“黑客”事物放在一起可能看起来是最简单/最好的做事方式,而实际上它只是你身边可能已经调整好的CSS。有人说,绝对有时候你无法绕过它,这就是野兽的本性。对我来说,最麻烦的是来自div。随着您作为开发人员的成长,您将逐渐了解每一次有效的工作,以及您必须反复测试才能做到正确。这只是一个练习问题。话虽这么说,只要你保持你的设计清洁和简单,它应该不会太困难。

答案 5 :(得分:1)

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

据我所知,它来自adobe的补充服务,所以试一试!

如果不起作用,你也可以尝试http://browsershots.org/,虽然我从未使用它,但它应该按照你的要求完成。