Question

只是一个简单的浮动操作按钮列表。总是这样运作：behavior in chrome是正确的

但是，当它runs in 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％（最大宽度）并同时使用鼠标时，才会产生不好的效果。为什么？这很奇怪。

Answer 1

此问题与悬停时使用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>

Flex在Chrome和Firefox中的行为有所不同

1 个答案: