【问题标题】:Remove the complete styling of an HTML button/submit删除 HTML 按钮/提交的完整样式
【发布时间】:2011-03-07 20:04:44
【问题描述】:

我在 CSS 中为所有浏览器设置了一个提交按钮的样式,它在除 ie7 之外的所有浏览器中都能正常工作 当我单击提交按钮时,它会稍微移到顶部。它使它看起来变形。 我为 ie 使用了特定的 css。

这是我使用的代码:

.button
{
    width   : 80px;
    background  : none;
    cursor  : pointer;
    font-family : 'voltaeftu-regular',Times New Roman;
    font-size   : 16px;
    color   : #fff;
    border  : none;
    margin      : 0px;
    padding     : 0px;
}

【问题讨论】:

    标签: html css


    【解决方案1】:

    我不知道这是否是问题,但您也可以尝试设置活动状态:

    .button, .button:active{
    ...
    }
    

    编辑: 在 IE7 中使用了以下 mini-sample 并且看不到按钮移动:

    <html>
    <head>
    <style type="text/css">
    .button
    {
    width   : 80px;
    background  : none;
    cursor  : pointer;
    font-family : 'voltaeftu-regular',Times New Roman;
    font-size   : 16px;
    color   : #fff;
    border  : 1px solid #0f0;
    margin      : 0px;
    padding     : 0px;
    }
    </style>
    </head>
    <body style="background:#f00;">
        <input class="button" type="submit"/>
    </body>
    </html>
    

    只需设置边框即可查看按钮周围环境。代码对我有用。

    【讨论】:

    • HI 标记我也试过了,但是没有用有什么办法可以解决这个问题
    • 您可以尝试其中一种重置 css 并查看问题是否仍然存在。但是在快速查看重置 css 时,我没有看到任何可能导致此问题的按钮设置。
    【解决方案2】:

    是的,我担心 IE(和 Opera)在单击时会将按钮的内容向下和向右移动一个像素,这是样式按钮无法避免的问题。

    这里有很多可能的方法:

    1. 使用带有&lt;span&gt;&lt;button&gt;,而不是&lt;input type="button"&gt;。将按钮relative和跨度absolute定位在top/left0,这样按钮内容的移动就不会影响跨度。丑陋,并且会在其他浏览器中中断,因此您只希望这种样式适用于 IE-and-maybe-Opera。

    2. 使用样式为按钮而不是实际按钮的链接,并将脚本应用于其click 事件。与按钮不同,您可以完全控制链接的一致样式。我建议不要这样做,因为您正在拖入大量对按钮没有意义的链接行为,例如中键单击、右键单击书签、拖放等。很多人确实使用链接做按钮任务,但 IMO 这是非常不可取的。 (特别是当他们使用javascript: 链接时......太可怕了。)

    3. 使用诸如&lt;span&gt; 之类的非活动元素代替实际按钮,并将脚本应用于其click 事件。同样,您可以获得完整的样式控制。这就是 SO 用于“添加评论”等操作的内容。问题是你破坏了键盘导航;您不能使用制表符、空格等来导航和激活控件。在大多数浏览器中,您可以通过给元素一个tabindex 属性来启用键盘导航,但是将tabindex 放在非活动元素上是无效的HTML。您也可以从脚本编写它,也可以添加脚本以留出空间或返回以激活人造按钮。但是您永远不会完全完美地重现浏览器表单字段的行为。

    4. 将整个内容替换为&lt;input type="image"&gt;。自然地,您可以对图像进行像素完美的控制!但是尝试匹配渲染样式,并为每个按钮生成一个新图像,通常是一件让人头疼的事情。

    选项 2 和 3 也存在引入 JavaScript 依赖的问题,因此当 JS 不可用时,您的表单会中断。您可以通过在标记中使用普通的&lt;button&gt; 并将其替换为脚本中的其他控件来缓解这种情况,或者如果您从脚本中创建它们无论如何也没问题。但最后,我通常的结论是,这一切都太过分了,结果也太脆弱了,最好的办法是为选项 0 加油:

    • 忍受它。当您单击按钮内容时,按钮内容会移动一点,这通常不是那么糟糕。

    【讨论】:

      【解决方案3】:

      这也困扰了我很长时间,但我找到了一个不错的解决方案。

      首先,您需要通过某种方式在 CSS 中定位特定浏览器。你可以使用 Modernizr,或者我个人最喜欢的,来自http://rog.ie/post/9089341529/html5boilerplatejs 的这个可爱的小 sn-p

      <script>
      var b = document.documentElement;
      b.setAttribute('data-useragent',  navigator.userAgent);
      b.setAttribute('data-platform', navigator.platform );
      </script>
      

      接下来,在您的 HTML 文档中,在您的按钮内,添加一个包含按钮内容的 &lt;span&gt; 标记。将其设置为在友好的浏览器中看起来不错,然后将这段代码添加到 CSS 中按钮的 :active 样式中:

      html[data-useragent*='Opera']
      

      您可以将Opera 替换为任何浏览器名称,然后根据自己的喜好设置span 的样式。

      它可能看起来像这样:

      html[data-useragent*='Opera'] button:active span { 
          position: relative; 
          left: -1px; 
          top: -1px; 
      }
      

      这有点 hacky,对于这样一个小问题可能有点矫枉过正,但它确实有效。最重要的是,您可以精确控制一切。您甚至可以只针对 Windows 机器或 iPad(使用 data-platform='iPad')或特定版本的浏览器,如下所示:

      html[data-useragent*='Chrome/13.0']
      

      祝你好运!

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2010-09-25
        • 2021-05-03
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2013-02-15
        相关资源
        最近更新 更多