2019-08-18.md

了解不同浏览器下拾色器的差别

本周阅读了一篇文章是关于拾色器类型的input的，作者在其中深入挖掘了这一类型的input的样式控制问题以及跨浏览器的兼容问题。总结内容如下几点：

拾色器input在不同浏览器上的外观表现

FireFox.png
Chrome.png
Safari.png

自上而下， 依次是Mac系统下的FireFox/Chrome/Safari浏览器上拾色器input的外观。很明显，Safari浏览器并不支持拾色器。

聚焦唤起
在Firefox以及Chrome上，使用Tab键可以获取到拾色器的焦点，然后Enter唤起拾色对话框。但是此后的操作就只能借助鼠标完成，方向键等无法实现取色。
作者在文章中提及，如果真的要在网站上使用拾色器，那么需要让浏览器知道这是亟待解决的问题。

如何查看拾色器内部构造
在Firefox上，可以新开一个Tab页面，在搜索栏输入about:config，在配置页面中搜索devtools.inspector.showAllAnonymousContent，将其置为true后返回拾色器页面打开控制台即可查看shadowDOM。
此外很可惜的是，在Chromium Edge之前的浏览器是没有该选项的。

但是我在Chrome上看到的结构和FireFox上看到的是不一样的，DOM结构如下：

Chrome.png
FireFox.png

浏览器差异

1. box-sizing
   FireFox:

   
   image.png
   

   Chrome:

   
   image.png

2.margin值
FireFox:

image.png

Chrome:

image.png

3.border值
FireFox:

image.png
Chrome:
image.png
除了Chrome的border色值为rgb(169, 169, 169)，FireFox的border色值为rgb(218, 218,218)以外，还看到一个不太一样的值 threedlightshadow，虽然不熟悉，但是没关系，这个系统值已经被弃用了，如果真的要深究，可以在CSS2 system value中可以找到。

4. padding值
   FireFox:

   
   image.png
   

   Chrome:

   
   image.png

5.width/height
FireFox:

image.png

Chrome:

image.png

以上是两个浏览器显著不同的属性，如果需要在这两个浏览器上满足统一的UI表现，那么首先需要从盒模型本身出发，样式覆盖为统一的border-box，其次将宽高以及margin、padding等统一。

如何将（伪）元素限制在其父级边框内

作者为了演示什么叫做将伪元素限制在父元素的边框内，做了一个demo，接下来的内容就是跟着demo一步一步解析。

创建菜单
step01代码

阶段1.png

step02代码

阶段2.png

step03代码

阶段3.png