如何开发100%浏览器兼容的基于CSS的布局?

Zom*_*ies 6 css jsf

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

其中一个开发人员正在使用基于用户代理切换他的CSS文件(一个用于FF,一个用于IE)的不那么好的做法.:/其他人坚持使用基于表格的布局,因为它们与浏览器兼容.

我想对如何使用CSS布局和排列元素进行一些小的指导.这必须与浏览器兼容.不能使用网格布局或"CSS框架",因为它们对于此处所做的事情不灵活.

例如,如果我们从外部设计公司获得90像素宽的图像,我们就不会将它们放入60px宽度的网格单元中.而且我们不打算调整它们以适应它们.如果公司设计主页面,单击链接看起来很傻,看到所有填充标识/图形的大小都会减小.

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

编辑:这是增加的扭曲.我们不接触任何HTML,我们使用来自JSF和Oracle ADF的基于组件的设计......它们将呈现HTML,我们使用CSS来对齐和设置它们.

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

ede*_*ett 8

在浏览器中使用布局的唯一真正方法是在每个浏览器中花时间进行测试.各种版本的IE都有自己的特殊问题,因此请使用条件注释为其提供额外的样式表.

从良好的语义有效HTML开始,不要尝试任何太复杂的布局,你会没事的.

如果你不想使用CSS库/框架,那就归结为体验和测试.


Arv*_*tad 5

100%兼容浏览器的网站可能主要来自经验和反复试验 - 主要是.IE8的推出变得更加容易,因为它(至少)完全符合CSS2标准.但是你仍然希望IE7和IE6能够很好地工作.彻底的测试至关重要.

请记住,100%浏览器兼容并不一定意味着它们必须看起来相同(在所有浏览器中网站应该看起来一样吗?).对于复杂的布局,应该接受微小的差异,并且可能必须存在一段时间.

以下是一些可能值得一看的链接: