【发布时间】：2014-10-01 19:11:19
【问题描述】：
我们在网页上有几个按钮，当您将鼠标悬停在按钮上时，会在右侧显示一条奇怪的小线。它只影响前两个（三个中的）按钮。这可能是因为没有第四个按钮，即效果可能只是因为有一个相邻的按钮才显示。这似乎发生在所有浏览器中。
附上一些显示小线的屏幕截图。
我做了一个JSFiddle sample 来显示问题。
或者这里也是 Stack JSFiddle（不知道它会这样做）：
element.style {
margin-top: 4px;
text-decoration: none;
width: 75px;
}
*:before, *:after {
box-sizing: border-box;
}
*:before, *:after {
box-sizing: border-box;
}
.btn-m {
background-color: rgb(220, 211, 188);
border-color: rgb(120, 97, 68);
color: rgb(69, 39, 0);
}
.btn-xs, .btn-group-xs > .btn {
border-radius: 3px;
font-size: 12px;
line-height: 1.5;
padding: 1px 5px;
}
.btn {
-moz-user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: normal;
line-height: 1.42857;
margin-bottom: 0;
padding: 6px 12px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
}
.btn-m {
background-color: rgb(220, 211, 188);
border-color: rgb(120, 97, 68);
color: rgb(69, 39, 0);
}
.btn-xs, .btn-group-xs > .btn {
border-radius: 3px;
font-size: 12px;
line-height: 1.5;
padding: 1px 5px;
}
.btn {
-moz-user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: normal;
line-height: 1.42857;
margin-bottom: 0;
padding: 6px 12px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
}
input, button, select, textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
cursor: pointer;
}
button, select {
text-transform: none;
}
button {
overflow: visible;
}
button, input, optgroup, select, textarea {
color: inherit;
font: inherit;
margin: 5px;
text-decoration: none;
}
* {
box-sizing: border-box;
}
a {
color: #000000;
}
a {
color: #000000;
}
a {
color: #428bca;
}
body {
font-family: Tahoma,Verdana,sans-serif;
}
body {
font-family: Tahoma,Verdana,sans-serif;
}
body {
color: #333;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857;
}
html {
font-size: 62.5%;
}
html {
font-family: sans-serif;
}<body>
<div style="position: absolute;top: 58px;left: 100px;">
<a href="log.php?Range=Today">
<button class="btn btn-m btn-xs" type="button" style="margin-top:4px; width: 75px; text-decoration: none;" title="Display records for Today only.">Today</button>
</a>
<button class="btn btn-m btn-xs" title="Display records for last 7 days." style="margin-top:4px; width:85px;" type="button">Last 7 Days </button>
<a href="">
<button title="week." type="button">Week</button>
</a>
<a href="log.php?Range=ThisMonth">
<button class="btn btn-m btn-xs" title="Display records from the first of the month through today." style="margin-top:4px; width:85px;" type="button">This Month</button>
</a>
</div>
</body>对于 CSS，请注意我只是从 Firebug CSS 窗口复制并粘贴了 CSS。我之前发布的计算 CSS 没有显示所有值。是的，CSS 是重复的；我们有许多不同的源/文件来定义事物，因此它们会重复。不过，从 Firebug 粘贴的结果很难看出这种区别。粘贴的版本可能会反转？ IE。 Fiddle 底部的“继承自 HTML ..”实际上是（我猜）首先要评估的东西，而 Firebug 只是颠倒了 CSS 评估顺序（对人类更有用）。
在做一些快速的摆弄时，它似乎来自锚标签。如果我从按钮定义中删除包装锚标记，则该行消失。 （奇怪的是，在 JSFIddle 上，神秘线一直出现，即使没有悬停。这让我更容易看到我认为的问题。）我还创建了一个新元素并将其粘贴在那里进行其他一些测试。任何;问题仍然可见。
对造成线路的原因或如何清理线路有任何想法吗？
谢谢， J
【问题讨论】：
-
请发布完整的代码示例，以便我们重新创建问题。 jsFiddle 或堆栈 sn-p 很有帮助。
-
没有您的 CSS 就无法提供好的解决方案。但是您可以使用此代码
a{text-decoration:none;}Demo 摆脱线 -
您在
<a>中使用<button>，所以我想拥有text-decoration:none就可以了。如果这对你有用，我会把它作为答案发布。 -
会给'文本装饰'一个镜头。有没有更好的方法来呈现没有
-
@Syed Ali Taqi：哇！看起来像'text-decoration：none'，当应用于锚时，解决了这个问题。感谢您的提示。