用于多浏览器支持的CSS生成器

Question

我知道在这个网站上有几个非常类似的相关问题，但是在审查了这个剧本之后，我相信这个问题本身就是独一无二的。如果有人可以找到并提供我的问题的确切欺骗的证据，我将自己撤回（所以请不要 downvote 这个！）。

我是Java开发人员，而不是Web开发人员。但是，就像许多家庭中有一个人成为指定家庭“计算机人”的情况一样，我的Java开发技能被误认为是Web开发技能，而且我不知何故被绑定到为我的父母建立一个网站，以帮助他们卖掉他们的房子。

所以，就像任何网络开发新手一样，我自己编写了HTML / CSS（手工编写，如DW或Expression等无编辑器）并对FireFox 3.x进行了测试。一切看起来都很棒，我们部署/推出了。

现在我们得到了所有人和他们的狗的负面反馈，说明该网站在其他浏览器，浏览器版本或运行在不同操作系统上的FireFox安装上无法正常呈现。同样，当通过智能手机或平板电脑设备观看时，该网站显然是一团糟。

现在我可以潜入并为我的CSS规则编写一大堆杂乱，讨厌，辛苦的编辑，基本上说：当浏览器为Y时执行X 等等。但我希望有一种工具可以让我所有的恐惧都得到休息。

我正在寻找的是一个可以获取我的有效CSS文件的工具，并使用它们来生成CSS规则，这些规则将与所有常见浏览器/版本的高百分比兼容。

或者，如果我必须从头开始重新编写CSS，那么拥有一个允许我编写/设计一次，部署许多的工具会很好，所以我只需要专注于单个CSS文件的设计，但生成的代码与多浏览器兼容。

听起来像DreamWeaver 有点这样做，但您必须从16个预先存在的模板中选择一个。

我的妻子是一名平面设计师，并使该网站非常甜蜜（不是千篇一律）。试图找出用于实现她的设计的CSS规则是一场噩梦。因此，任何迫使您在模板之间进行选择的工具都不是一种选择。

对我来说是否有任何希望，或者我现在羞于将自己从家里驱逐出去？

Answer 1

css是乱七八糟的，没办法自动做正确的事。说我会说有些工具会以适当的方式与你同行。 1.使用元标记：

  

http-equiv =“X-UA-Compatible”content =“IE = 8”（作为元标记包含 - 如果我将其作为有效标记写入，则不会显示）

强制IE使用它最现代的引擎进行渲染，这将解决一些问题。

2.用normalize.css开始你的css - 这将消除一些跨浏览器问题 - 因为它会重置你的css（更好，更现代的reset.css）

1. 如果你来自java dev世界，我将会推出GWT。虽然这是一个学习它自己的怪癖的框架。另一个可能的Web框架是Grails - 强大的Ror的一个不错的java / groovy端口。

2. Less或Scss不会自动解决您的基本问题 - 这是浏览器的兼容性 - 但是编写css是一种更好更简单的方法

3. 请记住，大多数css3属性在所有浏览器中都不是同等支持（并且在IE中几乎不支持） - 只使用带有支持js或css的优雅降级选项 - 当Modernizr js库可以给你漂亮时各种浏览器的良好的财产支持检测
4. 不要去Dreamweaver - 它会产生可怕的代码
5. 使用csslint检查有效的css和常见的css陷阱
6. 如果你必须使用带有html5 + css3元素的尖端网页渲染，你应该看看镀铬框架 - 这将使旧浏览器能够更好地支持你的网站 - 尽管我认为这可能对于简单的卖掉我的房子来说太过分了那种网站。
7. 使用css框架进行原型设计 - 它可以为你提供更好的css，良好的基础知识和重置以及良好的样板 - 可能是自举或类似的东西（没有尝试过大部分，但互联网上挤满了这些。
祝你好运

Answer 2

  

我正在寻找的是一个可以获取有效CSS文件的工具   使用它们来生成与高兼容的CSS规则   所有常见浏览器/版本的百分比。

不幸的是，没有这样的工具，您必须手动调试和测试您的网站以获得跨浏览器兼容性。我发现跨浏览器测试的最佳方式是在多个虚拟机中安装和测试不同版本的浏览器。

您还会发现以下内容：

Modernizr

Google Web Toolkit

Answer 3

查看modernizr。 http://www.modernizr.com/docs/

您希望进入检查功能而非浏览器的位置。

以下是使用其他浏览器检查您网站的绝佳网站：

http://www.browserstack.com/

Answer 4

Less（http://lesscss.org/）将帮助您完成许多CSS3功能。

然而，好的CSS代码只适用于所有浏览器。有一些CSS概念必须尽可能地避免（绝对定位，过多浮动，使用错误的任务元素等），并且您的代码将更好地工作。

在我编程的许多年里，我在前两年只需要特定于浏览器的代码。然后我长大了，了解了哪些CSS代码不能使用以及什么时候可以使用它们。根据我的经验，正确编写的CSS代码适用于所有浏览器，如果不能，它至少会使基本概念正确（例如，一些像素可能是错误的或某些效果，但网站仍然运作良好）

Answer 5

有些事情可以帮助您解决问题：

• 忘记IE6，无论你投入多少精力，都会给你带来麻烦。
• 确保你有一个好的doctype（html5或xhtml会很好）。
• 尝试html5 reset，它会尝试确保所有浏览器的行为都相同。
• 前面提到的重置还包括modernizr以使旧版浏览器加速

最后：接受（有些人甚至说“拥抱”）不同的浏览器使事情略有不同。在每个浏览器中使每个像素完全相同几乎是不可能的。

Answer 6

我讨厌把它放到这个世界，但听起来你需要Adobe Muse。

没有一个好的开发人员可以编写干净的跨浏览器代码，但如果您只是想让网站完成，请查看测试版：http://labs.adobe.com/technologies/muse/