Abolute-positioned element within a relative one causing overflow in Chrome/Safari

The problem we're trying to solve is that text is overflowing past the end of a `

`. It seems to be the result of its contents, which include a relatively-positions `` element, with an absolute-positioned `` element within it, which has padding. Firefox wraps the text as I would normally expect. Here's an abstraction of my HTML:

In this second example, mo muh...

And an abstraction of the CSS, as simplified as I think still makes sense: a { padding: 5px; } a span.icon { position: absolute; display: block; width: 15px; height: 15px; } Here's a screenshot of the problem (the highlighting is Chrome's element inspector with the `

` element highlighted). You can see the word `immediately` overflowing at the end of the `

`: Any pointers in the right direction appreciated.
Why use absolute positioning? You should be able to do this just fine using display:inline or setting the background-image of the link and some padding.

以上就是Abolute-positioned element within a relative one causing overflow in Chrome/Safari的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准