2012-11-05 41 views
4

我正在制作一个HTML页面,并试图设置一个<a>标记为border-bottomCSS:溢出:隐藏删除边界底部?

它会不是显示,无论我做了什么。所以我提出,在这里可以看到一个减少的测试用例:

http://codepen.io/hwg/pen/ILKdx

偏偏FF测试,而Chrome 22

如果我删除overflow:hidden;或将其更改为overflow:visible,它的工作原理。问题是我需要有设置。

那么我怎么能有一个边界底? (或者是我:))

(我不能用文字下划线,想把它点缀)

感谢

哈雷

+1

进行测试,指定'display:inline-block;' – Shmiddty

+0

@Shmiddty检查...是的,谢谢,它似乎工作! :) –

+0

@Shmiddty你可以让你的评论一个答案?我想勾选它! :) –

回答

7

display:inline-block;上的链接似乎是伎俩。

+0

只在现代浏览器中。 –

+0

@PerSalbark哪个不会在我工作?我需要IE8 +兼容性。 –

+2

IE8应该没问题。 IE7?没那么多。 HTTP:// caniuse。com/inline-block –

0

尝试增加行高。例如。

.grid{overflow:hidden; padding: 1px 0px;} 

OR

使电网元件内嵌:

.grid{overflow:hidden; display: inline;} 

有加line-height:200%;到#TEST CSS

+0

对不起,它弄乱了布局。 –

4

对电网的顶部和底部填充的添加1px大概有一百种解决这个问题的方法。

+0

一百种不同的方式? –

+0

@harley尽管每个人都有自己的负面影响,但我们已经看到了解决这个问题的三种方法,可能还有更多(我可以想到更多的东西)。你只需要找到最适合你的解决方案。 – Godwin

+0

虽然,风格是为了级联,如果你设置溢出:对一个可见,那么它应该只是...工作? (无论如何非常感谢。) –

0

在我的情况下,任何解决方案都不适合我。

我解决了这个问题,最后一个麻烦制作div后添加空白div。