代码之家 › 专栏 › 技术社区 › THX-1138

为什么<button>内的绝对定位与<div>的工作方式不同

css-position css html

THX-1138 · 技术社区 · 14 年前

<!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> 相对于垂直方向放置- 线(3倍填充我无法解释)。

更换 <button> 具有 <div> 地点 <跨度> 在左上角。

为什么绝对定位在按钮内(带position:relative)与使用 <部门> ? 我该怎么修?

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

重要 IE8.0的工作原理和我预期的完全一样(左上角的span),我看到的问题是在Firefox(3.6.6)中。

2 回复 | 直到 14 年前

Nikolay Moskvin 13 年前

<button> 这种方式。这真的很难设计风格,你最终不得不为不同的浏览器编写特定的风格。

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

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;
 }

你甚至可以用js来包装 <按钮> 页面加载时。这个系统已被证明是更加坚实和可靠。需要更少的css和几乎没有浏览器特定的样式。

更新: 正如我在下面评论的,包装元素不应该是 <a> 标签。记住我们需要 < 为了保持它的功能,我们只需要它是文本(表单仍然会提交输入)。你仍然可以重复使用任何css,你可能会用它把标准链接变成可扩展的按钮小部件,只有在这种情况下它;s a公司 <div> 而不是 <a> .

Kyle Cureau 14 年前

你的问题只是Firefox(3.6.6)-无法用标准CSS修复它。尝试:

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

推荐文章

Ravi21 · FF和IE中的元素变形

7 年前

Dolorosa · 使div不受其他div大小的影响

7 年前

Hursh Jha · java swing中的绝对定位图像图标

7 年前

Dave · 消除重叠div

7 年前

Cyberstaker · 如何使图像用箭头填充div?[副本]

7 年前

dekzok · 悬停使元素相互重叠

7 年前

J. Doe · CSS:关于绝对位置的几个问题

7 年前

q126y · 为什么将绝对定位元素的兄弟元素设置为position:relative,使其高于前者?

7 年前

Polygami · 保持图像居中,同时保持100%的高度,仅延伸/裁剪侧面

7 年前

arbuthnott · 子元素垂直居中,但允许父元素在子元素溢出时展开

7 年前