镀铬CSS边框：奇怪的灰色线条

我在Chrome中有一个边框问题。绿色边框有一些灰线。 Firefox：不可见->确定！ Chrome：不可见，但在开发工具、手机中可见。 我手机上的Chrome：可见

这是一个显示我的问题的截图！

1） 你什么时候去 有两条小灰线

2） 当你去的时候，会有更多的问题

* { padding: 0; margin: 0; }

body
{
font-family: sans-serif, Verdana, Arial;
color: #000000;
background-color: #556B2F;
}

#center {
position: relative;
width: 350px;
height: 630px;
box-sizing: border-box;
margin: 5px auto 0px auto;
}

#logo {

position: absolute;
width: 350px;
height: 220px;
background-color: #ffffff;
box-sizing: border-box;
background-image: url("img/m_bg_c.jpg");
background-repeat: no-repeat;
background-size: 350px 220px;
}

#navi
{
position: absolute;
top: 175px;
width: 60px;
height: 40px;
font-size: 16px;
color: #000000;
background-color: #ffffff;
margin-left: 10px;
}

#header
{
position: absolute;
top: 187px;
width: 238px;
height: 30px;
font-size: 16px;
color: #000000;
left: 85px;
}

#content
{
position: absolute;
top: 218px;
width: 350px;
box-sizing: border-box;
color: #000000;
background-color: #ffffff;
font-size: 14px;
overflow: auto;
padding-left: 5px;
padding-right: 5px;
**border-bottom: 5px solid #556B2F**;
}

3） 菜单按钮有橙色边框（仅限手机）。。。我不知道为什么，因为我的CSS中没有这样的颜色

请帮忙

这是密码。粗体部分是导致问题的边界

* { padding: 0; margin: 0; }

body
{
font-family: sans-serif, Verdana, Arial;
color: #000000;
background-color: #556B2F;
}

#center {
position: relative;
width: 350px;
height: 630px;
box-sizing: border-box;
margin: 5px auto 0px auto;
}

#logo {

position: absolute;
width: 350px;
height: 220px;
background-color: #ffffff;
box-sizing: border-box;
background-image: url("img/m_bg_c.jpg");
background-repeat: no-repeat;
background-size: 350px 220px;
}

#navi
{
position: absolute;
top: 175px;
width: 60px;
height: 40px;
font-size: 16px;
color: #000000;
background-color: #ffffff;
margin-left: 10px;
}

#header
{
position: absolute;
top: 187px;
width: 238px;
height: 30px;
font-size: 16px;
color: #000000;
left: 85px;
}

#content
{
position: absolute;
top: 218px;
width: 350px;
box-sizing: border-box;
color: #000000;
background-color: #ffffff;
font-size: 14px;
overflow: auto;
padding-left: 5px;
padding-right: 5px;
**border-bottom: 5px solid #556B2F**;
}

---

好的，在你的css中有两件事情正在发生

白线

对于您的内容分区，我现在将移动设备使用100%的宽度，当您扩展到平板电脑和台式机时，您可以更改为更固定或更流畅的宽度。我还将删除border bottom属性。这并没有完全扩展到内容框的宽度，我不确定这是否与您正在使用的边框大小属性有关。我还将以这种方式应用边框大小，以便将其应用于html中的每个元素

* {
  box-sizing: border-box;
}

橙色边框-这是由您正在使用的按钮的：focus pseudo css属性引起的，您可以通过这种方式删除它

按钮：焦点{ 大纲：无； }

标准化或CSS重置-考虑使用这些样式表中的一个在您的网站。它们可以帮助您在所有浏览器中更一致地呈现所有元素。这将节省您删除：focus属性的时间，就像我在前面的任何项目中提到的那样。大多数流行的CSS框架都利用它来规范基本样式

---

谢谢！我是一个业余爱好者，把我在网上找到的代码粘在一起。我发布的代码是针对移动设备的。我对桌面版本（）使用了不同的代码。。。我喜欢桌面设计，但不适合小型移动设备。肯定随时可以！当然随时可以？哦抱歉的意思是“随时乐意帮忙！”