按钮周围的边框问题 - CSS

Question

我是一名有用的助手，我可以翻译文本。

我在使用CSS装饰按钮的过程中遇到了问题：

CSS文件中的代码如下：

button
{

   font-family: Tahoma;
   color: #FFFFFF;
   font-size: 13px;
   font-weight: bolder;
   width: 180px;
   height: 50px;
   border:1px solid black inherit;
   background-repeat: no-repeat;
   margin: 0 10px;
   position: relative;
   background: url(C:/w3schools_demo/willpower/Images/button1.PNG);
}

加载页面后，它显示： 带有黑色边框和上传图像的按钮（如我所愿）， 但是图像和黑色边框之间存在一些白线。 请查看截图。如何修复/删除该行？

谢谢！

- Bulat Makhmutov

---

你在用哪个浏览器工作？ - LIGHT

将背景改为纯色，然后检查白色边框是否仍然出现。 - Muneer

尝试使用border:1px solid black;代替border:1px solid black inherit;。 - bhathiya-perera

Answer 1

尝试：

border-style:none;

大多数元素（如果不是全部）都会以某种方式被浏览器默认样式化。

- Crit Byte

Answer 2

当我使用按钮时，遇到了类似的问题。默认情况下，在单击按钮时会出现约1像素的边框。尝试将以下内容添加到您的按钮类中：

button {
     outline: 0;
}

- Avinash Rao

Answer 3

我发现在CSS中简单地切换焦点按钮可以消除这种情况，因为按钮在被点击后会自动处于焦点状态。并且在焦点状态下添加了一个轮廓线：

<button> 你好 </button>

/CSS脚本/

.button:focus { outline:none; }

- Obafemi Joseph Olorungbon

Answer 4

变更

border:1px solid black inherit;

到

border:1px solid black;

从 border 属性中移除 inherit 关键字

- LIGHT

---

浏览器：IE7；outline:none（失败） - Bulat Makhmutov

请上传你在问题中使用的图片 C:/w3schools_demo/willpower/Images/button1.PNG。 - LIGHT

你尝试过从边框属性中删除 inherit 关键字吗？ - LIGHT

Answer 5

设计网页时的一个问题是浏览器解释代码的方式不同，因为它们有所不同。我通常在开始时添加以下CSS来避免浏览器提供的任何默认设置。

html,body,li,ul,img,form,h1,h2,h3,h4,h5,h6,hr{ margin:0px; padding:0px; }

在您的情况下，可能是 img 元素或 button 元素缺少填充属性。也有可能是您的图像比 180px / 50px 小。

希望能帮到您！

- fierflash

Answer 6

背景方面，将图像更改为颜色，然后检查白色边框是否仍然出现 - 答案：我尝试使用海军蓝色，白线消失了。

- Bulat Makhmutov

Answer 7

button {
   font-family: Tahoma;
   color: #FFFFFF;
   font-size: 13px;
   font-weight: bolder;
   width: 180px;
   height: 50px;
   border:1px solid black inherit;
   /* this should work if any one encounters this problem  */

   border: none;

   background-repeat: no-repeat;
   margin: 0 10px;
   position: relative;
   background: url(C:/w3schools_demo/willpower/Images/button1.PNG);
}

- Flasat