问题描述
我正在手机上阅读 MDN 的 history.pushState()
页面,注意到我认为是文本错误:语法的最后一个参数中的 [
后面应该有一个逗号。>
我去编辑页面,发现逗号确实存在;它被 ? 复制到剪贴板按钮隐藏。 (奇怪的是,尽管 white-space: pre
,Chrome iOS 将其视为 pre-wrap
,而 Chrome 桌面则不然。)
对此的理想解决方案(除非修复 Chrome iOS)是设置第一行的 padding-right
的 CSS 样式。
@media screen and (max-width: /* ... */) {
/* or some other way to determine we're in a mobile browser */
.code-example pre:first-line {
padding-right: 41px;
}
}
然而,这似乎被忽略了。我是不是做错了什么,或者——正如我怀疑的那样——这根本不可能?
另一种更简单的解决方案是将“复制到剪贴板”按钮的样式设置为
.code-example .copy-icon {
display: block;
margin-right: -16px;
margin-top: -16px;
float: right;
}
并将 <button>
移动到 <pre>
内。但是,就像 <table>
代替 display: grid
一样,float
已经过时了。
此外,如果不对移动浏览器进行条件检查,此更改将改变桌面/无错误移动浏览器的行为:
尽管 white-space: pre; overflow: auto
,浏览器正在呈现换行。
假设 :first-line { padding-right }
不受支持,是否有另一种方法可以通过 CSS 或 JavaScript hack 实现相同的效果?
注意:我确实搜索了一个重复的问题,但每个结果都是关于缩进段落的第一行,其解决方案是:first-line { text-indent }
。
更新
我假设根据定义,任何检测浏览器的解决方案都必须检测浏览器,我们可以使用 navigator.userAgent
检测有问题的浏览器,然后操作 DOM 并应用 {{ 1}} 到按钮。不过有点恶心。
解决方法
检查您提到的 MDN 页面,我注意到 <code>
中有一个 <pre>
元素。因此,您可以执行以下操作:
@media screen and (max-width: /* ... */) {
/* or some other way to determine we're in a mobile browser */
.code-example pre code {
display: block;
max-width: 90%;
}
}
这样,“复制到剪贴板”按钮就不会与代码重叠。