移动端底部边框显示异常？检查 border-bottom 属性的默认值设置
当移动端页面底部边框不显示时，应检查 CSS 中是否遗漏了 border-bottom 属性或使用了无效的简写语法。
排查边框不显示的原因
移动端页面底部边框不显示，通常是因为 CSS 中未明确设置 border-bottom 属性，或者使用了简写语法导致样式被覆盖。根据资料，border-bottom 是一个简写属性，用于设置元素的底部边框。如果代码中只设置了 border-bottom-style 或 border-bottom-width，而没有设置 border-bottom-color，浏览器可能会应用默认颜色。此外，如果使用了简写语法且顺序不当，可能导致样式冲突。
检查代码时，应确认是否正确使用了 border-bottom 属性。资料指出，border-bottom 会设置 border-bottom-width、border-bottom-style 和 border-bottom-color 的值。如果代码中先设置了 border-bottom-style 为 dotted，然后又设置了 border-bottom: thick green，那么第一个样式会被忽略，因为简写属性会覆盖之前的设置。因此，需要确保简写语法的顺序和值正确，避免样式冲突。
验证属性设置的正确性
验证 border-bottom 属性设置的正确性，可以通过检查 CSS 代码和浏览器渲染结果来实现。首先，打开浏览器的开发者工具，检查元素的计算样式，确认 border-bottom 的值是否符合预期。如果代码中使用了简写语法，应确保所有三个值（宽度、样式、颜色）都已正确指定。例如，border-bottom: 1px solid #000 是一个有效的设置，而 border-bottom: 1px 则可能因为缺少样式和颜色而导致边框不显示。
如果边框仍然不显示，可以尝试移除简写属性，分别设置 border-bottom-width、border-bottom-style 和 border-bottom-color。资料提到，border-bottom 的默认值是 medium、none 和 currentcolor。如果样式部分被省略，默认值 none 会导致边框不显示。因此，确保在代码中明确指定了样式部分，例如 border-bottom: 1px solid red，以避免默认值的影响。
检查继承与全局值的影响
继承和全局值也可能影响 border-bottom 属性的显示。资料指出，border-bottom 是一个简写属性，其初始值取决于各个子属性的初始值。例如，border-bottom-width 的初始值是 medium，border-bottom-style 的初始值是 none，border-bottom-color 的初始值是 currentcolor。如果父元素设置了 border-bottom，而子元素没有明确设置，子元素可能会继承父元素的边框样式。因此，需要检查父元素的样式设置，确保子元素没有意外继承不正确的样式。
全局值如 inherit、initial、revert 和 unset 也可能影响 border-bottom 属性。如果代码中使用了这些值，浏览器会根据继承规则或默认值应用样式。例如，inherit 会继承父元素的 border-bottom 值，而 initial 会重置为默认值。因此，在检查代码时，应确认是否使用了这些全局值，并确保它们不会导致边框不显示。
复现检查步骤与结果判断
复现检查步骤如下：首先，在移动端页面中找到底部边框不显示的元素，打开浏览器的开发者工具，检查该元素的 CSS 样式。然后，确认 border-bottom 属性是否正确设置，包括宽度、样式和颜色。如果使用了简写语法，确保顺序和值正确。接着，尝试移除简写属性，分别设置各个子属性，观察边框是否显示。最后，检查是否使用了继承或全局值，并确认它们不会导致边框不显示。
判断结果的方法是观察边框是否显示。如果边框显示正常，说明属性设置正确。如果边框仍然不显示，可能需要进一步检查其他 CSS 属性或浏览器兼容性。资料提到，border-bottom 在 2015 年 7 月起在多个浏览器中广泛可用，因此兼容性问题较少。如果边框不显示，建议检查代码逻辑和浏览器开发者工具中的计算样式，以确定具体原因。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。