ios手机浏览器下button标签里svg产生的问题

发布于 2025-06-20  158 次阅读

解决方法:将button改为div

代码如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>测试</title>
    <style>
      /* 删除按钮 */
      .delete-btn {
        width: 24px;
        height: 24px;
        background: rgba(239, 68, 68, 0.9);
        border: none;
        border-radius: 50%;
        color: white;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
        transform: scale(0.8);
      }

      .delete-btn:hover {
        background: #dc2626;
        transform: scale(1.1);
      }

      .delete-btn svg {
        width: 12px;
        height: 12px;
        stroke-width: 2;
      }
    </style>
  </head>
  <body>
    <div>
      <button class="delete-btn">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <line x1="18" y1="6" x2="6" y2="18"></line>
          <line x1="6" y1="6" x2="18" y2="18"></line>
        </svg>
      </button>

      <div>--------------------分割线--------------------</div>
      <div>上面的在ios手机浏览器下svg太小了</div>
      <div>下面的在全端下正常</div>
      <div>--------------------分割线--------------------</div>

      <div class="delete-btn">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <line x1="18" y1="6" x2="6" y2="18"></line>
          <line x1="6" y1="6" x2="18" y2="18"></line>
        </svg>
      </div>
    </div>
  </body>
</html>

注错之当