只是一个简单的浮动操作按钮列表。 它总是这样工作：Chrome 中的行为是正确的
但是，当它在Firefox中运行时，是错误的。弹性框向左移动。并且没有显示文本。
我的 HTML 代码是：
<html class="light"><head><style>
.light {
--background: 255, 255, 255;
--surface: 255, 255, 255;
--color: 0, 0, 0;
--shadow: 0, 0, 0, .25;
--error-background: 211, 47, 47;
--error-color: 0, 0, 0;
--onBackground: 18, 18, 18;
--onSuface: 18, 18, 18;
--onError-background: 0, 0, 0;
--onError-color: 255, 255, 255;
}
* {
min-height: 32px;
min-width: 32px;
}
body {
margin: 0;
background-color: rgb(var(--background));
font-size: calc(12px + .625vmin);
color: rgb(var(--color));
}
div {
border-radius: 4px;
}
.fabs {
z-index: 6;
position: fixed;
bottom: 0;
right: 0;
max-height: 100%;
display: flex;
flex-direction: column-reverse;
flex-wrap: wrap-reverse;
align-content: baseline;
will-change: clip-path, opacity;
transition: clip-path .3s ease-out,opacity .3s ease;
clip-path: inset(calc(100% - 64px - 5vmin) 0 0 calc(100% - 80px - 7.5vmin));
overflow: hidden;
contain: layout style;
}
.fabs>a {
max-width: calc(48px + 2.5vmin);
max-height: calc(48px + 2.5vmin);
min-height: calc(48px + 2.5vmin);
border-radius: calc(24px + 1.25vmin);
background-color: rgb(var(--surface));
display: block;
text-decoration: none;
border: .5px solid rgb(var(--color),.2);
box-shadow: 0 0 6px rgba(var(--shadow));
margin: calc(8px + 1.25vmin) calc(16px + 2.5vmin);
transition: max-width .5s ease;
overflow: hidden;
visibility: visible;
}
.fabs:hover {
clip-path: inset(0);
}
.fabs>a~a:hover{
max-width: 100%;
}
.fabs svg {
width: calc(48px + 2.5vmin);
stroke: rgba(var(--color), .7);
}
.fabs>a~a::after {
content: attr(title);
vertical-align: top;
line-height: calc(48px + 2.5vmin);
margin-right: calc(24px + 1.25vmin);
color: rgb(var(--color));
}
</style>
</head><body><div class="fabs" id="fabs">
<a href="javascript:void(0)">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 -4 32 32">
<line x1="6" y1="12" x2="18" y2="12"></line>
<line x1="12" y1="6" x2="12" y2="18"></line>
</svg>
</a>
<a href="javascript:home()" title="Home">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 -4 32 32">
<polyline points="7 10.2,7 17,10.5 17,10.5 12,13.5 12,13.5 17,17 17,17 10.2" fill="#fff0"></polyline>
<polyline points="5 11,12 5,19 11" fill="#fff0"></polyline>
</svg>
</a>
<a href="javascript:window.scrollTo({top:0,behavior:'smooth'})" title="Top">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 -4 32 32">
<line x1="8" y1="7" x2="16" y2="7"></line>
<polyline points="8 13,12 9,16 13" fill="#fff0"></polyline>
<line x1="12" y1="10" x2="12" y2="18"></line>
</svg>
</a>
<a href="javascript:theme(+1)" title="Turn Theme">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-8 -8 40 40">
<path fill="#fff0" d="M22.6 11.29L20 8.69V5c0-.55-.45-1-1-1h-3.69l-2.6-2.6c-.39-.39-1.02-.39-1.41 0L8.69 4H5c-.55 0-1 .45-1 1v3.69l-2.6 2.6c-.39.39-.39 1.02 0 1.41L4 15.3V19c0 .55.45 1 1 1h3.69l2.6 2.6c.39.39 1.02.39 1.41 0l2.6-2.6H19c.55 0 1-.45 1-1v-3.69l2.6-2.6c.39-.39.39-1.03 0-1.42zm-4.68 1.69c-.34 2.12-1.85 3.94-3.88 4.66-1.21.43-2.41.45-3.5.18-.41-.1-.48-.65-.13-.9C11.98 15.84 13 14.04 13 12s-1.02-3.84-2.58-4.92c-.35-.24-.29-.79.13-.9 1.09-.27 2.29-.25 3.5.18 2.02.72 3.54 2.54 3.88 4.66.05.33.07.66.07.98-.01.32-.03.65-.08.98z"></path>
</svg>
</a>
</div></body></html>代码有什么问题？或者我应该怎么做才能让它像在Chrome中一样在Firefox中运行。
when mouse hover, it should be.(X is svg picture, ccc is text)
+---+ |
| X | |
+---+ |
+--------+ |
| X cccc | |
+--------+ |
+---+ |
| X | |
+---+ |
now in firefox, it become(text did not display, and others display position error)
+---+ |
| X | |
+---+ |
+---+ |
| X | |
+---+ |
+---+ |
| X | |
+---+ |但是当我拖动按钮时，它会正确显示。
当我在开发人员工具中设置元素状态悬停而不是使用鼠标时，它可以工作。
我可以使用最大宽度：calc(48px + 2.5vmin + 8em(，它可以工作。
但我尝试 calc(100% + 100vw( 同样糟糕，它不仅需要足够大的值。
只有我设置100%(最大宽度(并同时使用鼠标会产生不好的效果。 为什么？这很奇怪。
该问题与悬停时使用min-width:100%有关，从而产生了这种不良效果。您可以改用足够大的固定宽度来容纳所有文本：
:root {
--background: 255, 255, 255;
--surface: 255, 255, 255;
--color: 0, 0, 0;
--shadow: 0, 0, 0, .25;
--error-background: 211, 47, 47;
--error-color: 0, 0, 0;
--onBackground: 18, 18, 18;
--onSuface: 18, 18, 18;
--onError-background: 0, 0, 0;
--onError-color: 255, 255, 255;
}
* {
min-height: 32px;
min-width: 32px;
}
body {
margin: 0;
background-color: rgb(var(--background));
font-size: calc(12px + .625vmin);
color: rgb(var(--color));
}
div {
border-radius: 4px;
}
.fabs {
z-index: 6;
position: fixed;
bottom: 0;
right: 0;
max-height: 100%;
display: flex;
flex-direction: column-reverse;
flex-wrap: wrap-reverse;
align-content: baseline;
will-change: clip-path, opacity;
transition: clip-path .3s ease-out, opacity .3s ease;
clip-path: inset(calc(100% - 64px - 5vmin) 0 0 calc(100% - 80px - 7.5vmin));
overflow: hidden;
contain: layout style;
}
.fabs>a {
max-width: calc(48px + 2.5vmin);
max-height: calc(48px + 2.5vmin);
min-height: calc(48px + 2.5vmin);
border-radius: calc(24px + 1.25vmin);
background-color: rgb(var(--surface));
display: block;
text-decoration: none;
border: .5px solid rgb(var(--color), .2);
box-shadow: 0 0 6px rgba(var(--shadow));
margin: calc(8px + 1.25vmin) calc(16px + 2.5vmin);
transition: max-width .5s ease;
overflow: hidden;
visibility: visible;
}
.fabs:hover {
clip-path: inset(0);
}
.fabs>a~a:hover {
max-width: 300px;
}
.fabs svg {
width: calc(48px + 2.5vmin);
stroke: rgba(var(--color), .7);
}
.fabs>a~a::after {
content: attr(title);
vertical-align: top;
line-height: calc(48px + 2.5vmin);
margin-right: calc(24px + 1.25vmin);
color: rgb(var(--color));
}<div class="fabs" id="fabs">
<a href="javascript:void(0)">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 -4 32 32">
<line x1="6" y1="12" x2="18" y2="12"></line>
<line x1="12" y1="6" x2="12" y2="18"></line>
</svg>
</a>
<a href="javascript:home()" title="Home">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 -4 32 32">
<polyline points="7 10.2,7 17,10.5 17,10.5 12,13.5 12,13.5 17,17 17,17 10.2" fill="#fff0"></polyline>
<polyline points="5 11,12 5,19 11" fill="#fff0"></polyline>
</svg>
</a>
<a href="javascript:window.scrollTo({top:0,behavior:'smooth'})" title="Top">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 -4 32 32">
<line x1="8" y1="7" x2="16" y2="7"></line>
<polyline points="8 13,12 9,16 13" fill="#fff0"></polyline>
<line x1="12" y1="10" x2="12" y2="18"></line>
</svg>
</a>
<a href="javascript:theme(+1)" title="Turn Theme">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-8 -8 40 40">
<path fill="#fff0" d="M22.6 11.29L20 8.69V5c0-.55-.45-1-1-1h-3.69l-2.6-2.6c-.39-.39-1.02-.39-1.41 0L8.69 4H5c-.55 0-1 .45-1 1v3.69l-2.6 2.6c-.39.39-.39 1.02 0 1.41L4 15.3V19c0 .55.45 1 1 1h3.69l2.6 2.6c.39.39 1.02.39 1.41 0l2.6-2.6H19c.55 0 1-.45 1-1v-3.69l2.6-2.6c.39-.39.39-1.03 0-1.42zm-4.68 1.69c-.34 2.12-1.85 3.94-3.88 4.66-1.21.43-2.41.45-3.5.18-.41-.1-.48-.65-.13-.9C11.98 15.84 13 14.04 13 12s-1.02-3.84-2.58-4.92c-.35-.24-.29-.79.13-.9 1.09-.27 2.29-.25 3.5.18 2.02.72 3.54 2.54 3.88 4.66.05.33.07.66.07.98-.01.32-.03.65-.08.98z"></path>
</svg>
</a>
</div>