Question

我是UI开发世界的新手。现在我正在使用HTML和CSS来开发布局。我使用谷歌浏览器（因为它是一个非常好的浏览器，从我的角度来看，它是最好的）调试我的代码，但我刚刚下载了Firefox，看看我的设计将是什么样子（我在想什么当我发现我的设计看起来很糟糕而且我所经历的所有内容都与Firefox不兼容时，只会交错。

我需要具有该领域专业知识的人告诉我如何正确地感知浏览器之间的这种不兼容性（一些专业技术）以及我现在应该为我当前的设计以及开发其他网站时的未来做些什么？

PS 这个问题在我的背景下可能没有一些真正的英语，但我向你保证，我并不是要求而不是礼貌地询问我所在地区的声音。谢谢

更新

Answer 1

你必须随时学习，从简单的事情开始确保你有一个良好的基础。有许多先进的CSS3动画，过渡和＆amp;随着CSS3的转变变得越来越多更加强大。检查“Can I Use”以查看哪些浏览器支持您的CSS。响应式设计基于媒体查询（检查屏幕尺寸）和例如，使用百分比而不是px，因此设计可以根据设备而改变。此外，MDN是一个很好的参考工具，它还注明了浏览器的兼容性。

Answer 2

由于浏览器都是由不同的人开发的，因此总是存在遇到兼容性问题的可能性。

在防止出现此类问题时，我可以考虑两个步骤：

使用CSS重置器。这意味着一个样式表包含一组CSS，用于将所有项目带到相同的起始值（即chrome在列表项中有30px填充，firefox有35px，但css重置器告诉他们两个都有30px填充 - 只是一个例子）。有关CSS重置的更多信息，请查看此问题：CSS reset - What exactly does it do?
正确添加CSS。浏览器以不同方式实现属性，因此-webkit-transition:0.2s;在早期版本的chrome中工作，firefox只有-moz-transition:0.2s实现，直到它成为transition:0.2s应该是公认语法的标准。有许多工具可以帮助解决这个问题，例如Autoprefixer或pleeease.io

关于移动响应性，关键是避免使用许多固定宽度的元素（即主容器为1024px）或使用media queries并使用媒体查询将固定大小调整为某些显示大小。
互联网的知识库可以帮助您真正了解这一点，但如果您只想尝试一下，可以在这个问题上查看一些流行的媒体查询：Media Queries: How to target desktop, tablet and mobile?

Answer 3

一个好的做法是将填充边距设置为0并在样式表的第一行使用框大小来重置浏览器布局，如下所示

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
  }

这将有助于您更好地控制网站布局

Answer 4

问题的第二部分：
编写此代码以使您的网站在头部兼容相应地修改“1.0”部分。

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

浏览器对css的兼容性

4 个答案: