圆角输入按钮、绝对定位、液体宽度

Question

我意识到有很多圆形按钮问题，但我的需求相当具体，并且其他地方还没有得到解答。

这是我的要求：

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

版本在我看来，绝对定位+客户端只会使大多数圆角技术无法使用。

有图像或没有图像并不重要（无论哪种方式都可以）。允许使用 JavaScript。

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

Answer 1

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

Answer 2

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

CSS3 浏览器的多个背景可以处理这个问题，在 IE 中，我使用 DXTransform 过滤器添加第二个图像（请参阅 此处）。实际使用的技术是相当标准的滑动门样式设置，并进行了一些更改，以考虑到您无法将 IE 中的第二个图像放置在左上角以外的位置。

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

悬停/活动图像运行良好，而且全部采用 CSS，这是一个额外的好处。

Answer 3

由于允许使用 javascript（根据您的评论之一），我不认为以下操作会对性能产生重大影响：

1. div 包装 input 元素
2. 用 input 的定位属性并将其复制到 div 包装器，
3. 使用内联 position: staticinput 的定位code>
4. 添加其他元素或样式以获得圆角。作为固定高度，那么对于 IE7 以外的所有内容，像这样的一些 css 应该可以工作（假设固定高度为 20px，圆角端图像为 10px 宽 x 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 伪类。