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

我知道有很多问题，但我的需求相当具体，其他地方还没有回答

以下是我的要求：

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

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

图像与否并不重要（两种方式都可以）。允许使用JavaScript

---

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

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

既然允许使用javascript（基于你的一条评论），我不认为它会对性能造成多大影响：

用

div

获取

输入的定位属性

，并将它们复制到

div

包装器中

使用内联

位置：静态

添加其他元素或样式以获得圆角。如果是固定高度，那么对于除IE7之外的所有内容，像这样的css应该可以工作（假设固定高度为20px，圆形端图像为10px宽，20px高）：

Css:

假设您的javascript提供以下html：

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

---

您需要设置输入的样式以去除边框等（我还发现我在Firefox中的测试要求我设置

垂直对齐：top

，但不确定这是否必要。对于IE6-7，实际上必须在

输入前后添加额外的div，因为它们无法识别
：before
和
：after
伪类。
我最终使用了多个back。）按钮的接地

CSS3为浏览器提供了多种背景，可以处理这种情况。在IE中，我使用DXTransform过滤器添加了第二个图像（请参阅）。实际使用的技术是一种非常标准的滑动门样式设置，并进行了一些更改，以说明除了左上角之外，您无法在IE中定位第二个图像

对于FF 3.5和更低版本，我使用了边界半径，因为3.6版本中只有多个背景

悬停/活动图像效果很好，而且都是CSS，这是一个额外的好处。
我对你的要求感到困惑。你根本不能使用JS？或者使用的JS不能生成多个元素？因为如果你不能，你在这两方面都是IE上的SOL。所有技术都只是创建微小的元素，让IE中的圆角外观。在支持CSS3的浏览器可以在没有JS的单个元素上完成。如果可以使用图像，只需根据您的特定需要剪切图像。编辑：澄清允许使用JS。Liquid width不适用于静态图像。我不知道解决单元素问题的方法。出于兴趣，为什么在这种情况下需要这样做？输入是处于绝对位置（我无法控制-类似于仿真器），我无法修改输入的源代码。可能可以动态创建包装器并定位它们，但我相信跨浏览器工作会很慢，而且是一场噩梦。不过，这可能是我的下一个问题：）这是正确的。可以创建静态背景，但正如他所说的，如果调整大小，将导致拉伸和像素化（非常难看）。你可以用javascript来做，但一般来说，它会为你创建额外的元素。我以前见过：before/：after的想法，但我不确定这会与绝对定位产生什么影响。我想我会更改问题标题，因为这是真正的要求，而不是一个元素项。不过，我会测试这个想法。只要你让包装器与最初的输入具有相同的绝对位置，你不应该有任何问题。这种技术可行，但我正在使用的代码中存在一些其他复杂问题，这使得它非常烦人（例如设置宽度/高度和跨浏览器填充问题）.我的答案只有CSS解决方案，我发现它更简单，渲染速度更快。
<div class="inputWrap"><input /></div>