Chrome与IE浏览器元素显示差异咨询：购物车进度条异常排查

嘿，我来帮你拆解这两个问题：

这俩浏览器显示不一致，核心原因是它们的底层渲染逻辑和Web标准支持程度有本质区别：

• 内核本质不同：Chrome用的是Blink引擎（基于WebKit演化而来），而IE（尤其是IE11及更早版本）用的是Trident引擎，二者对HTML、CSS、JS的解析规则本身就存在差异。
• CSS标准支持差异：很多现代CSS属性（比如早期flexbox语法、grid布局、transform的部分取值）在旧IE里要么完全不支持，要么实现存在bug。比如IE11对flex属性的解析逻辑就和Chrome有明显区别，很容易导致布局错位。
• 文档模式的坑：IE自带“兼容模式”，如果页面没设置正确的DOCTYPE声明，或者用户手动开启了兼容模式，浏览器会模拟旧版本IE的渲染方式，这就和Chrome默认的标准模式渲染结果差很多。
• JS API的实现差异：如果页面用JS操作DOM或处理事件，部分API在IE里的表现和Chrome不一致。比如addEventListener在IE8及以下不支持，得用attachEvent；还有DOM选择器querySelectorAll在旧IE里对复杂选择器的支持也不完善。

网页里的进度条三角形大多用CSS border属性实现，结合IE的特性，问题根源大概率是这几点：

• 旧IE不支持transparent关键字：如果你的三角形样式依赖border-color: transparent来实现透明边框，IE8及更早版本是不认这个值的，会把透明边框显示成默认黑色（或继承的颜色），直接打乱三角形的形状。
• DOCTYPE缺失触发怪异模式：如果页面开头没加<!DOCTYPE html>声明，IE会进入Quirks模式（怪异模式），此时浏览器的盒模型、border渲染规则都和标准模式不同。比如用border做三角形时，怪异模式下的边框宽度计算会和Chrome的标准模式有偏差，导致三角形变形。
• 伪元素支持问题：如果三角形是用:after/:before伪元素实现的，IE8只支持单冒号的语法（:after而非::after），而且必须在标准模式下才能生效。要是你的代码用了双冒号，或者页面处于怪异模式，IE就会直接忽略这个伪元素，三角形自然就消失或异常了。
• 盒模型差异：IE在怪异模式下用的是“IE盒模型”（元素宽度=内容宽度+padding+border），而Chrome用的是标准盒模型（元素宽度=内容宽度）。如果三角形的容器设置了padding、border，两边计算出的尺寸不一致，三角形的位置或大小就会出错。

内容的提问来源于stack exchange，提问作者Jack Faith