我们正在为各种外部和内部网站创建一些布局。
其中一位开发人员正在使用基于用户代理切换他的CSS文件（一个用于FF，一个用于IE）的不那么好的做法。 :/其他人坚持使用基于表格的布局，因为它们与浏览器兼容。
我想对如何使用CSS布局和排列元素进行一些小的指导。这必须与浏览器兼容。不能使用网格布局或“CSS框架”，因为它们对于此处所做的事情不灵活。
例如，如果我们从外部设计公司获得90像素宽的图像，我们就不会将它们放入60px宽度的网格单元中。而且我们不打算调整它们以适应它们。如果公司设计主页面，点击链接看起来很傻，看到所有填充标识/图形的尺寸都会缩小。
需要某种资源或建议才能指明我正确的方向。
修改：这是添加的扭曲。我们不接触任何HTML，我们使用JSF和Oracle ADF的基于组件的设计...它们将呈现HTML，我们使用CSS来对齐和设置它们。
Edit2 ：我们可以在呈现HTML之前为HTML添加样式和属性。请记住，我们正在编辑没有.html文件，它是由组件生成的。
答案 0 :(得分：8)
在浏览器中使用布局的唯一真正方法是在每个浏览器中花费时间进行测试。各种版本的IE都有自己的特殊问题，因此请使用条件注释为其提供额外的样式表。
从良好的语义有效HTML开始，不要尝试任何过于复杂的布局，你会没事的。
如果您不想使用CSS库/框架，则需要经验和测试。
答案 1 :(得分：5)
100％与浏览器兼容的网站可能主要来自经验和反复试验 - 主要是。 IE8的推出变得更加容易，因为它（至少）完全符合CSS2标准。但是你仍然希望IE7和IE6能够很好地工作。 彻底的测试至关重要。
请注意，100％浏览器兼容并不一定意味着它们看起来必须相同（Should websites look the same in all browsers?）。对于复杂的布局，应该接受微小的差异，并且可能必须存在一段时间。
以下是一些可能值得一看的链接：
答案 2 :(得分：4)
100％的浏览器兼容性？听起来你需要某种不圣洁的恶魔魔法和/或许多诅咒和哭泣。
如果您不想使用任何类型的网格布局或CSS框架，那么您将不得不进行大量的试验和错误以及大量检查浏览器之间的差异。
祝你好运。祝你好运。你需要它。答案 3 :(得分：1)
就布局而言，您可以看到此网站是否是一个很好的参考。 http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm
还有Blueprint等框架。
雅虎也有css framework，这更复杂。
答案 4 :(得分：1)
首先，您需要选择一种方法并坚持下去。让一个开发人员以一种方式做事，而其他人以完全相反的方式做事就是在你开始之前先找麻烦。
其次，你需要在每个浏览器中抛弃相同体验的想法 - 如果这很难掌握，那就这样想吧： 浏览器只是用户使用内容的一种方式。您是否还计划为使用移动浏览器访问您网站的每个人提供相同的体验？或基于文本的浏览器？还是屏幕阅读器？ IE5怎么样？您的用户可以使用成千上万的用户代理怎么办？
这并非全是坏消息。有很多资源可以帮助使用CSS获得正确的布局，并且可以帮助解决IE中固有的错误。您可能会觉得有用的有：
答案 5 :(得分：0)
目前常见的做法是编写CSS以使其适用于Firefox（以及其他现代非IE浏览器），然后使用IE conditional comments添加特定于IE的修复程序。
不幸的是，任何非常简单的页面布局都会遇到IE 6和IE 7中的错误，这些错误只能通过给那些浏览器稍微不同的CSS来解决。
在一天结束时，您必须在所有目标浏览器中测试HTML / CSS;真的没有替代品。
答案 6 :(得分：0)
我唯一可以添加到@Edeverett和@ Dev.e.loper的回复是建议将它们组合起来。
从可靠，有效，语义（有意义）（X）的HTML标记开始。从标记的角度来看，保持简单。使用众所周知的CSS库/框架。测试，测试，测试。
答案 7 :(得分：0)
无法在所有浏览器中创建100％兼容的基于CSS的布局，因为有些浏览器未通过ACID test。事实上，大多数浏览器都没有通过此测试。
您只能希望在所有浏览器上看起来都不错（或者在浏览器上使用错误和/或“功能”优雅地降级）。
这是设计的：CSS从来没有打算让所有浏览器看起来都一样，它只是告诉浏览器你想要什么的一种方式。浏览器开发人员可以非常自由地按照您的意愿行事。
答案 8 :(得分：0)
浏览器的渲染效果不同。拥有干净，独立的CSS文件而不是在每个浏览器中攻击“只是工作”的单个文件并不是件坏事。
虽然很少见，但桌子有时间和地点，你只需要选择它。当开发时间和UI为了“最佳练习不使用表格”而采取合理的牺牲时，你不一定是胜利者。
每个布局的细微差别完全不同，浏览器错误（/差异）无法准确预测 - 尽管有些比其他布局更常见。
我提到了差异和错误，因为很多浏览器彼此不一致的地方都是HTML标准的不同且可能同样有效的解释。
关于浏览器兼容性的指导，除了 测试，测试，测试 之外，没有其他解决方案。
安装尽可能多的浏览器（FF，Chrome，IE，Safari，Flock，Opera等）。但是，让不同版本的不同浏览器同时运行变得棘手。这就是browsercam.com（商业）和browsershots.org（免费）等网站派上用场的地方。他们以您能想到的浏览器/操作系统组合为基础拍摄您网站的快照。
Browsercam.com实际上可以让你登录机器并玩弄网站，这可以方便地调试交互式CSS和JS。
我的建议是：
最后，请务必确保您了解DocTypes以及它们如何影响您的CSS;同一浏览器中完全相同的CSS将使用不同的DocType。它定义了浏览器如何处理您的（X）HTML和CSS。所以当你想知道为什么“这在xyz.com上工作但不在这里时”时要小心！
答案 9 :(得分：0)
确定。我知道我会为此获得一百万的嘘声，但如果你觉得，你的css过于复杂，如果你看到，你正在使用黑客为你支持的每个浏览器，如果你不能不要再接受了，只需使用gosh darn表格！
把它放在一边，确保你的标记/样式在每个浏览器中工作的唯一方法（顺便说一句，定义“每一个” - 我们是否每次都在讨论IE6？）你没办法，但是，正如人们已经指出的那样，在所有这些浏览器中测试它。我见过人们使用一些第三方网站，比如说browsershots.org有限的成功。也许这会对你有帮助。
答案 10 :(得分：0)
我建议第一步是使用某种形式的重置样式表（Eric Meyer的版本在这里： http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/和YUI版本： {{3删除浏览器的默认样式，这似乎是某些浏览器不一致的基础。它并没有完全平整场地，但是为了更清洁的起点，它可以平滑一些颠簸。
答案 11 :(得分：0)
我的建议是开始尝试让它发挥作用。当您遇到问题时，请谷歌寻找答案一段时间。如果你找不到一个，那么在论坛中提问。我认为这是大多数人学习CSS工艺的原因，因为很多错误和修复都不是很明显，你只需要逐渐成为受害者，然后学习解决所有CSS浏览器错误的解决方案。
答案 12 :(得分：0)
我的建议是停止尝试使其100％跨浏览器兼容。花大量时间和资源为大男孩设计 - IE7 / 8，FF，Safari，（Chrome？）和MAYBE Opera，因为他们最有可能代表超过98％的观众。你也可以在那里加入IE6，但是cmon，它已经是2009了，而且我们还有两个浏览器版本。 IE6的设计现在就像在IE6出现时为IE4设计。但那是你的电话。
根据我的经验，对于使用非标准浏览器的1-2％的用户来说，不值得花时间（我最后检查，等于钱）试着取悦所有人。但是，如果时间和金钱是无限的，那就去玩吧。
哦，并寄给我一些钱，因为它是无限的，所有：D
编辑 - 开始在FireFox中开发并从那里进行调整。这似乎是最“正确”的