css - 如何开发一个 100% 浏览器兼容的基于 CSS 的布局？

Question

我们正在为各种外部和内部网站创建一些布局。

其中一位开发人员正在使用基于用户代理切换他的 CSS 文件(一个用于 FF，一个用于 IE)的最佳实践。 :/ 其他人坚持使用基于表格的布局，因为它们与浏览器兼容。

我想要一些关于如何使用 CSS 来布局和排列元素的小指导。这必须与浏览器兼容。不能使用网格布局或“CSS 框架”，因为它们对于这里所做的事情不灵活。

例如，如果我们从外部设计公司获得 90 像素宽的图像，我们不会将它们放入 60 像素宽的网格单元格中。我们不会调整它们的大小以适应。如果公司设计主页，那么单击链接并看到所有填充 Logo /图形的尺寸都缩小了，这看起来很愚蠢。

需要某种资源或建议来指引我正确的方向。

编辑:这里是添加的扭曲。我们不接触任何 HTML，我们使用 JSF 和 Oracle ADF 的基于组件的设计......它们将呈现 HTML，我们使用 CSS 来对齐它们并设置它们的样式。

Edit2:我们可以在 HTML 呈现之前将样式和属性添加到 HTML。请记住，我们正在编辑的不是 .html 文件，它是由组件生成的。

Answer 1

让布局跨浏览器工作的唯一真正方法是花时间在每个浏览器中测试。各种版本的 IE 都有自己的特殊问题，因此使用条件注释为它们提供额外的样式表。

从良好的语义有效 HTML 开始，不要尝试任何过于复杂的布局，你会没事的。

如果您不想使用 CSS 库/框架，则归结为体验和测试。