为什么中的绝对定位与的工作方式不同[英]Why does absolute positionining within works differently from 本文翻译自 THX-1138 查看原文 2010-07-09 2274 css/

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).

相对于垂直 - 中间线放置（3px填充我无法解释）。

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.

背景：我在按钮内使用两个绝对定位的div来创建一个带圆角的浮动宽度按钮。

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).

编辑：重要IE 8.0完全按照我的预期工作（跨越左上角），我看到的问题是Firefox（3.6.6）。

2 个解决方案

#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.

您甚至可以使用js在页面加载时包装

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:

你的问题只适用于Firefox？（3.6.6） - 无法使用标准CSS修复它。尝试：

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

That will do it for Firefox hopefully. Good luck!

这将有望为Firefox做到这一点。祝你好运！

#1