实线边框由CSS的border属性实现，与HTML版本无关；现代平板无需-webkit-前缀；常见问题包括元素无宽高、被裁剪、颜色与背景相同或box-sizing未设为border-box。
HTML5 里设实线边框用 border 就行，跟 HTML 版本无关
HTML5 不是新样式语言，它不定义边框语法。实线边框靠 CSS 的 border 属性实现，和你写的是 还是旧 DOCTYPE 完全无关。只要浏览器支持 CSS2.1（2000 年就普及了），border: 1px solid #000 就能生效。
平板上要不要加 -webkit- 这类前缀？
现代平板（iOS 13+、Android Chrome 70+、Samsung Internet 10+）已完全不需要为 border 加前缀。这个属性从 CSS1 就存在，连 IE6 都支持 solid。加 -webkit-border 不但无效，还可能干扰解析——CSS 规范里根本没有这个属性名。
- 真正需要前缀的通常是
flex、grid、filter或动画相关属性 -
border-style的取值如solid、dashed、dotted全是标准关键字，无厂商差异 - 如果边框在某台平板上“不显示”，大概率是其他问题：元素没宽高、被父容器裁剪、
border-color和背景色一样、或用了border: none覆盖
容易被忽略的实线边框细节
看似简单，但三个地方常出问题：
-
border默认只作用于元素的「内容框」（content-box），如果元素width设得太小，边框会撑出容器——这时要加box-sizing: border-box - 设置单边边框别写
border-top: 1px solid red后又漏掉border-left/right/bottom，否则其他三边会变默认的none，看起来像“只有一边有线” - 用
border: 1px solid时，如果不指定颜色，不同浏览器默认色不同（Chrome 是rgb(118, 118, 118)，Safari 是深灰），建议显式写border: 1px solid #333
验证是否真有问题？直接看 computed style
在平板浏览器里打开开发者工具（比如 Safari iOS 的远程调试、Chrome Android 的 chrome://inspect），选中元素，看「Computed」面板里的 border-top-style 和 border-top-width 是否为 solid 和非零值。如果这里正常，但页面看不见边框，基本可以确定是布局或层级问题，不是边框本身失效。
立即学习“前端免费学习笔记（深入）”；
