chrome83 vs chrome 84+ 先说结论，chrome83是个对开发不太友好的版本，它有很多奇奇怪怪的东西。 1、chrome83版本中 ,, <Select>这些标签在focus的状态下会显示一个黑边。<br /><img src="https://cdn.nlark.com/yuque/0/2022/png/20365003/1654153409707-1f7ee838-4275-4b95-a01d-fbc7dbbcd877.png#clientId=u04b3b7e1-4148-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=223&id=u1fdf7932&margin=%5Bobject%20Object%5D&name=image.png&originHeight=223&originWidth=196&originalType=binary&ratio=1&rotation=0&showTitle=false&size=42131&status=done&style=none&taskId=u6cbf7df3-367f-4079-9257-8a72839328b&title=&width=196" alt="image.png"><br />这是由于user agent stylesheet里的样式:focus实现<br /><img src="https://cdn.nlark.com/yuque/0/2022/png/20365003/1654153423366-94d2b272-1730-4985-83ba-e9a67f383e2b.png#clientId=u04b3b7e1-4148-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=105&id=u1b6274d5&margin=%5Bobject%20Object%5D&name=image.png&originHeight=105&originWidth=488&originalType=binary&ratio=1&rotation=0&showTitle=false&size=9166&status=done&style=none&taskId=u1996725f-3b5a-425b-9a2b-e21449d53d4&title=&width=488" alt="image.png"></p> <p>这个特性在chrome84及chrome84+被删掉了。<br />如果在chrome83中遇到了这个问题，可以通过覆写样式:focus来解决。</p> <p>2、ResizeObserverSize的entry<br />chrome83及之前的版本中entry的实现与之后的不同(之前的少了一些属性)</p> <p>↓chrome83<br /><img src="https://cdn.nlark.com/yuque/0/2022/png/20365003/1654153439367-1dacb7ae-cefb-484a-b86c-cecea2e61c5d.png#clientId=u04b3b7e1-4148-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=97&id=u107e7dce&margin=%5Bobject%20Object%5D&name=image.png&originHeight=97&originWidth=250&originalType=binary&ratio=1&rotation=0&showTitle=false&size=7374&status=done&style=none&taskId=u46468d2e-e1ab-4e80-9c4f-b9be53e7140&title=&width=250" alt="image.png"><br />↓chrome84<br /><img src="https://cdn.nlark.com/yuque/0/2022/png/20365003/1654153445816-4e690ca5-30a0-4e53-b428-b005ad28be41.png#clientId=u04b3b7e1-4148-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=158&id=u22c28caa&margin=%5Bobject%20Object%5D&name=image.png&originHeight=158&originWidth=209&originalType=binary&ratio=1&rotation=0&showTitle=false&size=14462&status=done&style=none&taskId=u6d37a55e-a3df-4e7d-8831-203c3a347fb&title=&width=209" alt="image.png"> <img src="https://cdn.nlark.com/yuque/0/2022/png/20365003/1654153491516-b085abdf-f188-438a-a22a-2b52d5edeb23.png#clientId=u04b3b7e1-4148-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=194&id=u4b34a46d&margin=%5Bobject%20Object%5D&name=image.png&originHeight=194&originWidth=202&originalType=binary&ratio=1&rotation=0&showTitle=false&size=25154&status=done&style=none&taskId=u4fc08fb0-0f70-4992-8d82-d681ddef5fe&title=&width=202" alt="image.png"></p> <p>chrome84及84之后的实现，entry中多出了<br />borderBoxSize, contentBoxSize, devicePixelContentBoxSize 三个属性</p> <p>===========↑ 2022年6月2日 ↑===========</p> <p>未完待续</p>
