富文本编辑器工具栏按钮蓝色下划线及<a>标签尺寸问题求助

嘿，我来帮你搞定这两个困扰你的问题！咱们一个个来拆解：

问题1：标签尺寸小于其子元素 #

标签默认是行内元素，这类元素的height属性其实不会生效，而且没法很好地包裹住内部的SVG元素。你只需要修改<a>的显示模式，让它变成能控制尺寸的行内块级元素就行：

#buttons a {
  height: 100%;
  /* 关键：改成inline-block，让<a>能包裹子元素并响应宽高设置 */
  display: inline-block;
  /* 可选：对齐SVG，避免底部多余间距 */
  vertical-align: middle;
}

问题2：Chrome工具栏按钮的蓝色下划线 #

这个是<a>标签的默认样式——text-decoration: underline在搞鬼！哪怕里面是SVG，Chrome有时候还是会给行内的<a>加上下划线。咱们直接把这个默认样式去掉，还要覆盖聚焦、点击等状态：

#buttons a,
#buttons a:focus,
#buttons a:active {
  /* 彻底去掉下划线 */
  text-decoration: none;
  /* 可选：去掉聚焦时的默认轮廓线，让按钮样式更统一 */
  outline: none;
}

另外，刚才把<a>改成inline-block也能间接避免这个问题，因为行内块级元素的文本装饰不会和SVG元素产生奇怪的重叠。

整合后的完整CSS代码 #

把这些修改加到你的现有代码里，最终样式会是这样：

#buttons svg {
  height: 24px;
  width: 24px;
  display: inline;
}

#buttons svg path {
  fill: #FFFFFF;
  margin: 0;
  padding: 0;
}

#buttons a {
  height: 100%;
  display: inline-block;
  vertical-align: middle;
  text-decoration: none;
}

#buttons a:focus,
#buttons a:active {
  text-decoration: none;
  outline: none;
}

body div {
  position: absolute;
  display: inline;
}

#toolbar {
  width: 25%;
  z-index: 9;
  height: 100%;
  right: 0;
  box-shadow: 0 0 ... /* 保留你原有阴影样式 */
}

这样应该就能解决你遇到的两个问题，工具栏按钮会正常显示，没有奇怪的下划线，<a>标签也能完全包裹SVG啦！

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