当页面上有多个按钮时，按钮样式在页面加载时有粗边框答案

【问题标题】：Button Style has thick border on page load when multiple buttons are on a page当页面上有多个按钮时，按钮样式在页面加载时有粗边框
【发布时间】：2011-01-16 14:23:17
【问题描述】：

这是我在这里提出的第一个问题，堆栈溢出。

我有一个问题一直困扰着我。

当我在页面上加载了一个包含多个按钮的页面时，HTML 标记中的第一个按钮似乎在按钮周围有这个思考边框。

如果之前有人问过这个问题，我很抱歉，但我已经阅读了许多与此问题相关的论坛，但迄今为止未能成功地通过解决此问题的建议来解决此问题。我猜它与页面加载时按钮的焦点有关，以便按下键盘按钮时的可用性。

我希望有一种方法可以在 IE 7 及更高版本的焦点模式下通过 javascript 或在此代码中设置此按钮的样式。我正在使用 VB.net，但如果后面的代码是可行的方法，我将不胜感激 C# 示例。

任何帮助将不胜感激。

谢谢杰克

【问题讨论】：

不是直接解决您的问题，但您可以通过将表单中的 defaultbutton 属性设置为所需的按钮控件 ID 来指定哪个按钮应获得焦点。
你能把截图或示例页面放在某个地方吗？ “厚”有多厚？您对按钮有任何 CSS 规则吗？

标签： asp.net javascript html css

【解决方案1】：

尝试使用 :focus 伪类为按钮应用 CSS 样式，这可能允许更改按钮的样式。不知道是否所有主流浏览器都支持。

http://www.w3schools.com/CSS/pr_pseudo_focus.asp

【讨论】：

嘿，我想我需要更多的声誉来添加图像，基本上按钮是一个带有 1px 黑色边框的样式平面按钮，并且按钮的背景和文本已更改。加载页面时，第一个按钮会获得 2-3 像素的边框。但我认为 Filburt 对这个问题有正确的答案，我认为使用 IE 你只是被问题困住了。现在还不错，因为我已经和我的项目经理讨论过这个问题，他对显示它们的按钮很好，因为他说这是一个可用性问题，所以用户不会知道哪个按钮是键盘点击的焦点。
但是，如果有人确实有解决这个问题的方法，那么我真的会对答案很感兴趣，因为我已经尝试了很多方法来解决这个问题，但没有一个成功。感谢大家的帮助。
也感谢您的回答，据我所知，它对于其他浏览器是正确的，但对于 IE 则不正确（IE 总是必须不同）。

【解决方案2】：

您可以尝试将按钮包装在一个跨度中，为该跨度提供边框并将其从按钮中移除？

风格：

<style type="text/css">
    .span-button INPUT { background-color: transparent; border-width: 0px; }
    .span-button { background: Silver; border: 1px solid red; }
</style>

HTML：

<span class="span-button"><input type="button" value="wrapped button" /></span>

【讨论】：

【解决方案3】：

如果您的意思是粗边框：IE 对表单上的第一个提交按钮执行的默认突出显示，然后检查：Stopping IE from highlighting the first submit-button in a form

【讨论】：

【解决方案4】：

使用这些 CSS 样式中的任何一种

a:active, a:focus,input, input:active, input:focus{     outline: 0;     outline-style:none;     outline-width:0; }  
a:active, a:focus,button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner 
{     border: none; }

或

:focus {outline:none;} ::-moz-focus-inner {border:0;}

CSS 样式部分完成后，您可能还需要设置 IE 模拟器。更新您的 Web 应用程序 web.config 文件并包含以下键。

  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <clear />
        <add name="X-UA-Compatible" value="IE=7; IE=9; IE=8; IE=5;" />
      </customHeaders>
    </httpProtocol>

  </system.webServer>

【讨论】：