圆形输入按钮，绝对定位，液体宽度

Question

我意识到有很多圆形按钮问题，但我的需求非常具体，而且其他地方都没有回答。

这是我的要求：

• 使用绝对定位的按钮
• 仅客户端技术（无法在服务器端更改HTML）
• 适用于输入类型=按钮，输入类型=提交（不需要按钮元素）
• 固定高度，液体宽度
• 支持IE7或更高版本

绝对定位+客户端只会使我认为大多数圆角技术无法使用。

图像或无图像无关紧要（两种方式都可以）。允许使用JavaScript。

编辑：改变问题以反映实际问题：我认为我需要的一个HTML元素并不是真正的要求。

Answer 1

IE不可能。这就是为什么你无法在其他地方找到它。你唯一能做的就是使用一个静态的背景图像，但它会拉伸不同的宽度。

Answer 2

我最终使用了多个背景按钮。

CSS3可以处理该浏览器的多个背景，在IE中我使用DXTransform过滤器添加第二个图像（参见here）。使用的实际技术是一个非常标准的滑动门样式设置，有一些更改，以解释您无法将第二个图像放在IE中而不是在左上角。

对于FF 3.5及更低版本，我使用了border-radius，因为多个背景只有3.6。

悬停/活动图像工作正常，而且全部都是CSS，这是一个奖励。

Answer 3

由于允许使用javascript（基于您的一条评论），我不知道它会如何受到重大影响：

1. 使用input
打包div个元素
2. 获取input的定位属性并将其复制到div包装
3. 使用内联input
删除position: static的定位
4. 添加其他元素或样式以获得圆角。固定高度，然后对于IE7以外的所有东西，这样的一些CSS应该工作（假设固定高度为20px，圆形末端图像宽10px，高20px）：

的CSS：

div.inputWrap:before, 
div.inputWrap:after {content: ' '; display: inline-block; height: 20px; width: 10px; background: url(/yourRoundedLeftEndImg.png) top left no-repeat;}

div.inputWrap:after {background: url(yourRoundedRightEndImg.png);}

假设你的javascript给你这个html：

<div class="inputWrap"><input /></div>

你需要设置输入样式以摆脱边界等等（我还发现我在Firefox中的测试要求我设置vertical-align: top，但不确定是否有必要。对于IE6-7，你实际上必须在input之前和之后添加额外的div，因为它们无法识别:before和:after伪类。