Why does absolute positionining within <button&

2019-03-26 14:50发布

站内文章 / HTML/CSS
16 0 0

问题:

I expect following code to put my span to the top-left corner of the button, but it doesn't. Why is that?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <style type='text/css'>
        </style>
    </head>
    <body>
        <button style='height:100px;width:100px;position:relative;'>
            <span style='position:absolute;top:0;left:0;'>text</span>
        </button>    
    </body>
</html>

<span> is placed relative to the vertical-middle line (with 3px padding I can't explain).

Replacing <button> with <div> does places <span> at the top-left corner.

Question: why does absolute positioning within button (with position:relative) behaves differently from layout using <div>? And how do I fix it?

Background: I use two absolutely positioned div's within button to create a floating-width button with rounded corners.

EDIT: IMPORTANT IE 8.0 works exactly as I expect it (span in the top-left corner), the problem I see is in Firefox (3.6.6).

回答1:

I advice against using a <button> this way. It is really difficult to style and you'll end up having to write specific styles for different browsers. I needed to achieve something very similar and after dealing with a large amount of exceptions and fiddly positioning to accommodate different browser rendering, I went for this structure instead:

<div class="button">
 <span>
  <button>Text</button>
 </span>
</div>

With the button tag reset this way:

button {
    background:none repeat scroll 0 0 transparent;
    border:0 none;
    font-family:inherit;
    font-size:inherit;
    font-weight:inherit;
    margin:0;
    overflow:visible;
    padding:0;
   position:relative;
 }

You can even use js to wrap the <button> on page load. This system has turned out to be much more solid and reliable. Requiring less css and almost no browser specific styling.

Update: As I commented below, the wrapping element should not be an <a> tag. Remember that we need the <button> to keeps its functionality, we just need it to be text only (form will still submit on enter). You can still re-use any css that you may be using to turn standard links into expandable button widgets only in this case it;s a <div> instead of an <a>.



回答2:

Your problem is only with Firefox?? (3.6.6) - Can't fix it with standard CSS. Try:

button::-moz-focus-inner { 
  border: 0;
  padding: 0;
}

That will do it for Firefox hopefully. Good luck!



标签： html css css-position
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~