Web browsers are software, and just like any software they sometimes have bugs. This isn’t because browser engineers don’t care, it’s because CSS is insanely complicated in terms of all the things we use and abuse it for. In addition a “bug” can be an interoperability issue caused by one vendor interpreting the specification in a different way to another. Web browsers don’t need to just work as individual pieces of software, they also have to aim to render the same code in an identical way to another piece of software that has a completely different rendering engine interpreting that spec.

Web浏览器是软件，就像任何软件一样，它们有时也有错误。 这不是因为浏览器工程师不在乎，而是因为CSS在我们使用和滥用它的所有方面都异常复杂。 此外，“错误”可能是由于一个供应商以与另一供应商不同的方式解释规范而导致的互操作性问题。 Web浏览器不必只是作为单独的软件来工作，它们还必须致力于以与另一软件完全相同的方式来渲染相同的代码，而另一软件具有完全不同的渲染引擎来解释该规范。

As a community it is in our interest to report issues when we see them, in order that they can be fixed. This is especially important for features that are in beta like CSS Grid.

作为一个社区，我们希望在看到问题时报告问题，以便可以解决问题。 这对于Beta版的功能（如CSS Grid）尤其重要。

CSS Grid is now in Firefox (52) Beta. For bugs we need to hear about before shipping, tell us in next 2-3 weeks at https://t.co/FoNqKzHPTX

— L. David Baron (@davidbaron) January 26, 2017

CSS Grid现在处于Firefox（52）Beta中。 对于我们在运输前需要了解的错误，请在接下来的2-3周内通过https://t.co/FoNqKzHPTX告诉我们

— L. David Baron（@davidbaron） 2017年1月26日

While grid has been in development for over five years, there have been very few web developers actually building and experimenting with it. This means that there may well be cases where unexpected things happen - in particular when grid interacts with other parts of CSS. This is where you come in, if you find an issue now it might be fixed before grid ships. The web community will salute you.

虽然网格开发已经超过五年了，但很少有Web开发人员实际在构建和试验网格。 这意味着很可能在某些情况下发生意外情况-尤其是当网格与CSS的其他部分交互时。 这是您要来的地方，如果现在发现问题，则可能在网格发货之前已解决。 网络社区将向您致敬 。

So, how does a regular person go about reporting a browser bug? The first thing you need to know is whether you have a bug.

那么，普通人如何报告浏览器错误？ 您需要知道的第一件事是您是否有错误。

是个虫子……还是我是个白痴？ (Is it a bug … or am I being an idiot?)

I know CSS pretty well, but the majority of things I suspect to be a browser bug turn out to be a problem situated between my keyboard and my chair. The first skill to learn is how to troubleshoot an issue until you can isolate exactly what behaviour is ‘buggy’. The ability to reduce and isolate problems is one of the best things you can learn as a web developer. It doesn’t matter which language you are working in, or what software is being buggy. Being able to isolate issues means you can fix them in your own code, work around them and hopefully report them to a third party software vendor.

我对CSS非常了解，但是我怀疑是浏览器错误的大多数东西却是键盘和椅子之间的问题。 首先要学习的技能是如何对问题进行故障排除，直到您可以准确地识别出什么是“越野车”。 减少和隔离问题的能力是作为Web开发人员可以学习的最好的东西之一。 无论您使用哪种语言，还是使用哪种软件进行故障检测都无关紧要。 能够隔离问题意味着您可以将其修复为自己的代码，加以解决，并希望将其报告给第三方软件供应商。

创建一个简化的测试用例 (Create a reduced test case)

When you create a reduced test case, what you are doing is removing anything that isn’t relevant to the issue. This will help you figure out if what you have is indeed a bug - and also give you a really simple test case of the problem to share later.

创建简化的测试用例时，您正在执行的操作是删除与该问题无关的所有内容。 这将帮助您弄清楚您所拥有的确实是一个错误-并为您提供了一个非常简单的问题测试案例，以后可以分享。

Obvious things to remove would be any JavaScript that doesn’t trigger the issue, and surrounding page elements. It is also a worthwhile practice to remove any items in the example that don’t seem to relate to the bug. Often while doing this you will learn something about the problem at hand.

显而易见的要删除的东西是不会触发问题的任何JavaScript，以及周围的页面元素。 删除示例中似乎与该错误无关的所有项目也是一个值得实践的做法。 通常，这样做时您会学到一些有关手头问题的知识。

I could write a lot more on this part of the process - however I don’t need to as Lea Verou wrote an excellent and still relevant piece a few years ago for Smashing Magazine. Take a look at her article Help the community! Report Browser Bugs!

我可以在过程的这一部分上写很多东西-但是我不需要，因为几年前Lea Verou为Smashing Magazine撰写了一篇出色而又有意义的文章。 看看她的文章“ 帮助社区”！ 报告浏览器错误！

As an example, I was testing out the interaction of absolutely positioned elements and CSS Grid Layout. I started to see some odd behaviour in that sometimes absolutely positioned items seemed to be becoming narrower in Chrome, rather than stretching to the area width. By removing other elements from my example that were holding the column wider, I could see that while the first column behaved as I would expect, the second absolutely positioned element was shrinking to the width of the longest word. This meant it was shrinking to min-content width.

例如，我正在测试绝对定位的元素和CSS Grid Layout的交互作用。 我开始看到一些奇怪的现象，即有时完全定位的项目在Chrome中似乎变得更窄，而不是延伸到区域宽度。 通过从示例中删除其他使列更宽的元素，我可以看到，尽管第一列的行为符合我的预期，但第二个绝对定位的元素却缩小到最长单词的宽度。 这意味着它正在缩小到最小含量的宽度。

在每晚版本的浏览器中测试 (Test in Nightly versions of browsers)

It may be you have a bug that has already been fixed, and you will be able to see the fix if you download and use the newer experimental release of that browser. I had a look at my shrinking issue in Firefox Nightlies and didn’t see the behaviour. I also checked Chrome Canary to see if this had changed in the latest build, but the problem was still apparent there.

可能是您有一个已修复的错误，如果您下载并使用该浏览器的较新的实验版本，则可以看到此修复程序。 我查看了我在Firefox Nightlies中不断缩小的问题，但没有看到该行为。 我还检查了Chrome Canary，以查看最新版本是否已更改，但是问题仍然很明显。

检查规格 (Check the specification)

In my example I have two browser implementations doing something different. So which browser has the bug? The spec is the place to find out.

在我的示例中，我有两种不同的浏览器实现。 那么哪个浏览器有此错误？ 该规范是查找的地方。

I searched in the spec for information about absolutely positioned elements, and found the section about absolutely positioned items with a grid container as a containing block. This was the situation I had, as my grid container is set to position: relative making it the containing block for my positioned items. Looking at this section and the example it seemed that I should expect my positioned item to use the space available to it in the area, not shrink down to the minimum amount of space it could take based on the content.

我在规范中搜索了有关绝对定位元素的信息，并找到了有关以网格容器作为包含块的绝对定位项目的部分。 这就是我遇到的情况，因为网格容器已设置为位置：相对将其设置为我定位的项目的包含块。 查看本节和示例，似乎我应该期望定位的项目使用该区域中可用的空间，而不是缩小到根据内容可以占用的最小空间。

If you can’t work out from the spec which browser is getting it wrong, that’s ok. Sometimes, especially with new specifications, it may be that the behaviour isn’t very well defined. In that case the browser implementors and the spec editors will need to work out which behaviour to run with, and make sure the spec makes that clear.

如果您无法从规格中确定哪个浏览器出了错，那就可以了。 有时，尤其是在采用新规范的情况下，行为可能未得到很好的定义。 在这种情况下，浏览器实现者和规范编辑者将需要弄清楚要运行哪种行为，并确保规范明确说明。

看起来像个虫子 (Looks like a bug)

Your investigations may have identified something that looks buggy in one or more browsers, the next step is to go have a look at the bugs for that browser and see if the issue is already reported.

您的调查可能已经发现在一个或多个浏览器中看起来有问题的东西，下一步是去查看该浏览器的错误并查看是否已报告该问题。

• Chrome
• Firefox
• Safari
• Edge

• Chrome
• 火狐浏览器
• 苹果浏览器
• 边缘

There is is also a search that helps you locate bugs from all browsers at once, useful if you are seeing some odd behaviour and don’t know which browser is displaying your example incorrectly.

还有一个搜索可以帮助您一次查找所有浏览器中的错误 ，如果您看到一些奇怪的行为并且不知道哪个浏览器显示的示例不正确，该搜索将非常有用。

By working through the issue you hopefully have figured out some good keywords to search on. The spec you are seeing the behaviour in is a good start, plus anything that describes the issue. For me I had:

通过解决这个问题，您希望可以找到一些不错的关键字进行搜索。 您所看到的行为规范是一个良好的开端，以及描述问题的所有内容。 对我来说，我有：

• css grid
• min-content
• absolute positioning or ‘abspos’

• CSS网格
• 最小含量
• 绝对定位或“绝对”

I searched using these terms in the Chromium issue tracker and after reading a few issues found - Positioned items using min-content even when there are enough available space. Bingo! That’s what I’m seeing. So, in this case I don’t need to log a bug, instead I added a comment with a link to my test case as an additional example.

我在Chromium问题跟踪器中使用这些术语进行了搜索，并阅读了一些发现的问题- 即使空间足够，也使用min-content定位了项目 。 答对了！ 那就是我所看到的。 因此，在这种情况下，我不需要记录错误，而是添加了一个注释，其中包含指向我的测试用例的链接作为附加示例。

记录错误 (Logging a bug)

If you have found something that looks like a bug, and can’t find mention of it, then log the bug with the browser or browsers in which you see the issue. Once again, I’ll not reproduce the great advice in Lea’s article, but be sure to spend a some time writing a descriptive title and short summary of the issue. The clear title of the bug logged against the issue I was experiencing enabled me to locate it in the tracker based on my keyword search.

如果您发现了看起来像错误的东西，却找不到提及，请使用您发现问题的一个或多个浏览器记录该错误。 再一次，我不会在Lea的文章中重提建议，但是一定要花一些时间写一个描述性的标题和简短的问题摘要。 针对我所遇到的问题记录的错误的清晰标题使我能够基于关键字搜索在跟踪器中找到它。

Include your reduced test case in order that the implementors can reproduce it. Link to the section of the specification if you have identified where the correct implementation is documented, and mention if you believe you have seen the correct behaviour in another browser. Your report should be as short as possible while being clear as to the problem at hand.

包括减少的测试用例，以使实现者可以重现它。 如果您确定在哪里记录了正确的实现，请链接到规范部分，并提及如果您认为在其他浏览器中看到了正确的行为，请提及。 您的报告应尽可能简短，同时要明确眼前的问题。

对人好点。 (Be nice.)

It should go without saying that when reporting issues you should be polite. Browser engineers are regular developers like you or I. We don’t like it when our boss or client yells at us because something isn’t working, the same is true for people working on browsers. No-one wants bugs in any software. By working alongside the people who implement new things into our browsers we will find fewer things to cause us problems in the future.

不用说，在报告问题时，您应该礼貌。 浏览器工程师是像您或我一样的常规开发人员。当老板或客户对我们大喊大叫是因为某些事情不起作用时，我们不喜欢它，对于使用浏览器的人也是如此。 没有人想要任何软件中的错误。 通过与在我们的浏览器中实现新功能的人员一起工作，我们会发现更少的东西将来会给我们造成问题。

Identifying and working through bugs is a brilliant way to level up your CSS skills. You don’t just help browser vendors and the rest of us - but you’ll get better at CSS for doing this too. If you think you have found something with the Grid implementations in particular and want another set of eyes on it post it over at my CSS Grid AMA. I’ll be happy to take a look.

识别并解决错误是提高CSS技能的绝妙方法。 您不仅可以帮助浏览器供应商以及我们其他人，而且可以在CSS方面做得更好。 如果您认为自己在Grid实现中找到了一些东西，并希望在它上面有另外的眼神，可以将其发布到我的CSS Grid AMA上 。 我很乐意看看。