剖析HTML中各类元素在不同浏览器下的默认样式-html教程-PHP中文网

答案是a选项*{margin:0;padding:0;}，该通配符选择器可全局清除所有元素默认内外边距，解决浏览器因user agent stylesheet差异导致的间距不一致问题。

剖析html中各类元素在不同浏览器下的默认样式

不同浏览器对 `margin` 和 `padding` 的默认值不一致

Chrome、Firefox、Safari 默认给 <p></p>、<h1></h1>～<h6></h6>、<ul></ul>、<ol></ol> 等元素设了非零的 margin，而 IE（尤其 IE6–8）的数值更小甚至为 0；在部分老版本中还有默认 margin 或 padding。这直接导致相同 HTML 在不同环境里首屏留白、段落间距明显错位。

实操建议：

不要依赖浏览器默认值，统一用 * { margin: 0; padding: 0; } 开头重置（注意：它会影响表单控件的可访问性，生产环境建议改用 normalize.css）
若只针对布局容器，优先重置语义化块级容器：body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, pre, form, fieldset, legend, button, input, textarea, table, th, td { margin: 0; padding: 0; }
避免在重置后又漏掉 button、input[type="submit"] 的 vertical-align，否则可能引发基线对齐异常

`display` 行为在 IE8 及以下与现代浏览器差异显著

IE8 不支持 display: inline-block 对原生行内元素（如 <span></span>）生效；<li> 在某些版本中会忽略 display: block 后的 width；<img> 默认是行内元素，但 IE6–7 会额外渲染 3px 下间隙（源于行框底部留白）。

实操建议：

需要兼容 IE8 时，用 display: inline-block 配合 zoom: 1 触发 hasLayout（仅 IE）
修复图片间隙：给 <img> 加 display: block 或 vertical-align: top/middle/bottom
避免对 <dt></dt>、<dd></dd> 直接设 float，IE6 下易触发阶梯错位，应改为包裹容器浮动或使用 display: flex（需垫片）

`form` 控件在各浏览器中尺寸、边框、字体渲染不统一

<input type="text">、<select></select>、<textarea></textarea> 在 Chrome 中默认带圆角和阴影，Firefox 更“扁平”，IE 则默认有粗边框和固定字号；button 的默认 line-height 和 padding 差异也大，导致垂直居中困难。

小红书长文-谷歌浏览器

在 Linux 上通过 Chrome 挂载/VNC 自动发布小红书长笔记。Agent 撰写标题和正文后执行 xhs_publish.sh --publish --submit，触发小红书发布。

下载

实操建议：

统一重置表单控件基础样式：input, select, textarea, button { font: inherit; margin: 0; padding: 0.375em 0.75em; border: 1px solid #999; background: #fff; }
禁用 WebKit 自动高亮：input:focus, textarea:focus, select:focus { outline: none; }（但必须补足焦点可见性，比如加 box-shadow）
IE6–7 中 input 去边框只能靠 border: 0，不能用 border: none；且需配合 background: transparent 防止背景色残留

HTML5 新标签如 `<article></article>`、`<nav></nav>` 在旧浏览器中无法识别

IE8 及更早版本不识别任何 HTML5 语义标签，会把它们当未知元素处理——既不渲染样式，也无法被 CSS 选择器匹配，document.createElement('article') 必须提前执行，否则后续样式无效。

实操建议：

必须引入 html5shiv.js（或类似 polyfill），且只在 IE 条件注释中加载：
即使加了 shiv，IE8 仍不支持 getElementsByClassName，若 JS 依赖该方法，需额外垫片
慎用 <main></main>：IE 仍不支持其 ARIA 语义映射，屏幕阅读器兼容性差，建议用 role="main" 显式声明

真正容易被忽略的是：默认样式差异不是孤立存在的，而是和盒模型、字体继承、行高计算、hasLayout 触发机制层层耦合。比如修复了 margin，却没处理 line-height 导致文字在按钮里上下偏移；用了 normalize.css 却忘了它不解决 IE8 的 flex 缺失问题。兼容性从来不是“加个 reset 就完事”，而是每处样式都要预判它在目标环境里怎么被解析、怎么被继承、怎么被渲染。