可移植 CSS 的规则是什么?
我是 CSS 新手,需要遵守哪些规则才能确保 CSS 在其他浏览器中看起来相同? (我使用火狐)。
PS IE7有什么具体规则吗?
I'm new to CSS, what are the rules to obey to make sure that CSS looks the same in other browsers? (I use Firefox).
P.S. Are there any specific rules for IE7?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(6)
在此网站中,您拥有所有必要的信息,请研究 Peter 的 http://www.quirksmode.org/-保罗·科赫不要使用特定于浏览器的选择器,例如以 -moz- 或 -webkit- 为前缀的选择器
。 最后,不,不幸的是,不能绝对确定。测试、测试、更多测试是唯一的解决方案。
In this website you have all the necessary information, study http://www.quirksmode.org/ by Peter-Paul Koch & Don't use browser specific selectors, such as ones prefixed by -moz- or -webkit-
Finally, No, not absolutely sure, unfortunately. Testing, testing, and more testing is the only solution.
您在这里问的是一个相当广泛的问题,但需要遵循的一些指导原则是:
确保它是标准化的 CSS 和 HTML。如果它具有 -moz-、-webkit- 或 -o-(或更多)供应商前缀,则它的行为可能与您的预期不完全一致。
确保它有效!将其通过 W3 验证服务 查看代码中的任何错误。
考虑使用 CSS 重置,例如 Eric Meyer 重置。这会将所有元素重置为 0padding、margin 等。
或者使用 Normalize(正如 Meo 指出的那样),例如 HTML5 Boilerplate。
了解如何使用 IE 的条件注释。在大多数情况下,“真正的”浏览器(Chrome、Firefox、Opera)将按应有的方式呈现 HTML。由于存在多个正在使用的 IE 版本,您必须为每个版本提供不同的代码(不支持 IE6),这是最好的方法。
可能还有很多东西需要补充,但最好的确实是经验。
祝你好运!
You're asking a quite broad question here, but a few guidlines to follow would be:
Make sure it's standardized CSS and HTML. If it has a -moz-, -webkit- or -o- (or more) vendor prefix, it might not behave exactly as you intend.
Make sure it validates! Put it through the W3 validation service to see any errors in your code.
Consider using a CSS reset, like the Eric Meyer reset. This will reset all your elements to 0padding, margin etc.
Or use a Normalize (as Meo points out) like the HTML5 Boilerplate.
Learn how to use IE's Conditional Comments. For the most part, the "real" browsers, (Chrome, Firefox, Opera) will render the HTML as it should be. With there being multiple in-use versions of IE, you're going to have to give different code for each of the versions (don't support IE6) and this is the best way to do it.
There's probably a lot more to add too, but the best thing really is experience.
Good luck!
我认为最糟糕的起点是这里:
http://html5boilerplate.com/(阅读注释的 CSS。)它规范了不同浏览器之间的 CSS 行为。 (我不建议使用重置)。
请参阅 http://na.isobar.com/standards/ 了解最佳前端最佳实践。
有一些规则可以让你的东西在 IE 6 和 IE 中工作。 7(确实是唯一会给你带来严重麻烦的):
当某些东西在 IE6 / 7 中不起作用时,请在尝试其他操作之前尝试设置缩放:1
z-index 在旧版 IE 上有点棘手
首先为 IE 制作 yout 网站然后为其他浏览器(CSS3)做一些奇特的事情,它会为您节省很多麻烦
不要在 html 文件中插入超过 32 个 CSS 文件(不是开玩笑;)http: //acidmartin.wordpress.com/2008/11/25/the-32-external-css-files-limitation-of-internet-explorer-and-more/ )
尝试避免在 CSS 中使用 MS 过滤器...(可能会使您的网站渲染速度非常慢,并可能导致 JS 动画出现意外行为)
I think the bast place to start is here:
http://html5boilerplate.com/ (Read the Commented CSS.) Its normalizes the CSS behavior across the different browsers. (i would not recommend using a Reset).
Consult http://na.isobar.com/standards/ to get to know the best frontend best practices.
There are some rules doe to make your stuff work in IE 6 & 7 (does are the only ones that gonna cause you serious trouble):
When something does not work in IE6 / 7 try to set zoom: 1 before you try anything else
z-index is a little tricky on old IE's
make yout sites for for IE first then do the fancy stuff for the other browser (CSS3) its gonna save you a lot of trouble
Do not insert more then 32 CSS files to your html file (no joke ;) http://acidmartin.wordpress.com/2008/11/25/the-32-external-css-files-limitation-of-internet-explorer-and-more/ )
Consult http://www.quirksmode.org/ to develop e sensibility for what is working where
try to avoid MS filters in your CSS... (can make your site rendering very slowly and can lead to unexpected behavior with JS Animations )
在 IE 9 之前,就 CSS 而言,IE 似乎从未遵循任何规则,但几乎所有其他浏览器都遵循以下 W3 标准:
CSS 参考,W3 概述< /a>, W3 CSS Validator
理论上,如果你坚持这些,一切都应该有效,但事实并非如此就像现实中那样。这当然是朝着正确方向迈出的一步,其余的细节只是通过尝试、错误和经验来学习的。
Up until IE 9, IE never seemed to follow any rules at all as far as CSS goes, but for pretty much all other browsers follow these W3 standards:
CSS Reference, W3 Overview, W3 CSS Validator
In theory, if you stick to these, everything should work, but it isn't quite like that in reality. It's certainly a step in the right direction though, the rest of the nitty gritty is just learned through trying, errors and experience.
该网站将为您提供一个良好的开始。
http://htmlhelp.com/reference/css/struct.html
This website will give you a good start.
http://htmlhelp.com/reference/css/structure.html
你不能总是确定。
但你可以使用 CSS 重置。
所有浏览器标准 css 设置都将被重置,然后您就有了一个干净的开始。
http://meyerweb.com/eric/tools/css/reset/
You can't always be sure.
But you can use a css reset.
All the browsers standard css-settings will be resetted and you then have a clean start.
http://meyerweb.com/eric/tools/css/reset/