macOS 上的 Safari 选择颜色在空白处为蓝色

Question

观察下面的两个屏幕截图，第一个在 Chrome 中，第二个在 Safari 中。两种浏览器均为截至问题日期（2023 年 1 月）的最新版本。

页面背景是Chrome中观察到的深灰色。当按下 CMD+A（选择全部）时，应应用选择颜色（黄色），如 Chrome 中所示。然而，在 Safari 中，可以看到两个有趣的观察结果：

1. Safari 将选择应用于文本容器（宽度）之外的空白区域。
2. Safari 在

   <br />

   元素上使用原生蓝色选择颜色。

如何删除蓝色选区，以及如何将选区包含在文本宽度内？

Answer 1

如果没有看到你的实际代码，我不能肯定地说，但根据我今天必须解决的问题，我最好的猜测是：

1. 对于此问题，您可以将任何类型的空转换应用于父容器，例如

   transform: translateY(0);

   。
2. 对于这一点，您可以将违规元素设置为

   display: block;

   或

   display: flex;

   。如果您正在处理不想全宽的按钮或类似元素，则可以将其设置为

   max-width: max-content;

   。

希望这对将来的人有帮助。

Answer 2

  br::selection {
  background-color: transparent;
}
/* Remove the text shadow */
::selection {
  text-shadow: 0 0 0 transparent; 
}