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

Question

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

我是一个Java开发者，而不是一个Web开发人员。但是，正如在许多家庭的情况下有一个人谁成为指定家庭“电脑家伙”，我的Java开发技能会被误解为Web开发技能，和我不知何故拉拢到建立一个网站，我父母帮助他们卖掉房子。因此，就像任何网络开发新手一样，我自己编写了HTML/CSS（手工编辑，DW或Expression等无编辑器），并对FireFox 3.x进行了测试。一切看起来很棒，我们部署/推出。

现在我们得到了来自所有人和他们的狗的负面反馈，指出该网站在其他浏览器，浏览器版本或运行在不同操作系统上的FireFox安装上不能正确呈现。类似地，该网站是显然当通过智能电话或平板设备正在观看的总一团糟。

现在我可以跳水，写一大堆杂乱，肮脏，精心-繁琐的编辑我的CSS规则的，基本上说：做X时，浏览器为Y等，但我希望那里有一个工具可以让我所有的恐惧休息。

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

或者，如果我必须从头重新编写我的CSS，这将是一件好工具，它允许我一次写入/设计，部署很多，这样我只需要专注于设计的单个CSS文件，但生成的代码与多浏览器兼容。

听起来像DreamWeaver 种这样做，但你必须从16个预先存在的模板之一进行选择。

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

对我有没有什么希望，还是现在我可以把自己从家人的耻辱中解救出来？

Answer 1

CSS是一个烂摊子，没有办法自动做对的。说我会说有些工具会以适当的方式与你一起走。 1.使用元标记：

HTTP的当量= “X-UA-兼容” 内容= “IE = 8”（encpsulate作为元标记 - SO将不会显示，如果我写它作为一个有效的标签）

强制IE与其最现代化的引擎渲染，这将解决一些问题。

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

1. 我将第二的GWT如果你来自Java开发世界。虽然它是一个学习它自己的怪癖的框架。另一个可能的web框架是Grails - 强大的Ror的一个很好的java/groovy端口。

2. 小于或SCSS不会自动解决的基本问题 - 这是浏览器compatibily - 但写CSS

3. 记得最CSS3属性不会在所有的浏览器同样支持（更好的和更简单的方法并在IE几乎不支持） - 使用它们只与优雅的降级选项与支持JS或CSS - 当Modernizr JS库可以给你不同的浏览器相当不错的财产支持检测
4. 不要去Dreamweaver - 它会产生可怕的代码
使用 csslint检查有效的CSS和常见的CSS陷阱
5. 如果您必须使用html5 + css3元素的尖端网页渲染，您应该查看chrome框架 - 这将使较旧的浏览器能够更好地支持您的网站 - 尽管我相信这可能是一个简单的出售我的房子的矫枉过正种类的网站。
6. 使用一个CSS框架，以原型的它会给你更好的CSS，良好的基础，并重置和良好的样板 - 也许引导或类似的东西（没有尝试大多但互联网是挤满了那些

好运

Answer 2

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

不幸的是，没有这样的工具，你必须手动调试和测试你的网站的跨浏览器兼容性。我已经找到了跨浏览器测试它安装在多个虚拟机测试不同版本的浏览器的最佳途径。

您还可以找到以下帮助：

Modernizr

Google Web Toolkit

Answer 3

退房Modernizr的。 http://www.modernizr.com/docs/

你想进入检查功能而不是浏览器的位置。

这里是一个优秀的网站与其他浏览器来检查您的网站：

http://www.browserstack.com/

Answer 4

以下（http://lesscss.org/）将帮助你很多CSS3功能。

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

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

Answer 5

几件事情浮现在脑海中，可以帮助你的情况：

• 忘记IE6，一个给你的麻烦，无论你投入多少精力到该网站。
• 确保你有一个很好的文档类型（html5或xhtml会很好）。
• 尝试html5 reset，它会尝试确保所有浏览器的行为相同。
• 上述复位还包括modernizr把旧的浏览器加快速度

最后：接受（甚至有人说“拥抱”），不同的浏览器显示的东西略有不同。在每个浏览器中使每个像素完全相同将几乎不可能。

Answer 6

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

没有等于一个良好的开发谁都会写干净的跨浏览器的代码，但如果你只是想进行检查公测网站：http://labs.adobe.com/technologies/muse/