<输入类型=“文本”的圆角>>对 IE 使用 border-radius.htc
我想创建一个带有圆角的输入字段。
HTML：
<div id="RightColumn">
<input type="text" class="inputForm" />
</div>
CSS：
.inputForm
{
-moz-border-radius:10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari, Chrome */
-khtml-border-radius: 10px; /* KHTML */
border-radius: 10px; /* CSS3 */
behavior:url("border-radius.htc");
}
#RightColumn
{
background-color:White;
}
但是 IE 不显示输入字段的任何边框 - 更圆润的边框或简单的边框。 当我删除 #RightColumn 的 CSS 样式时，IE 显示带有圆角的输入字段。 但我需要#RightColumn 的背景。
我怎样才能创建它？
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
哦主啊，不要这样做。出于性能和清晰度方面的原因，HTC 文件从来都不是一个好主意，并且您使用了太多供应商特定的参数来完成可以轻松跨浏览器一直到 IE6 完成的操作。
将背景图像应用到带有圆角的输入字段，并使用 border:none 使字段的背景颜色透明。
Oh lord, don't do it this way. HTC files are never a good idea for performance and clarity reasons, and you're using too many vendor-specific parameters for something that can easily be done cross-browser all the way back to IE6.
Apply a background image to your input field with the rounded corners and make the field's background colour transparent with border:none applied instead.
...谁在乎IE6，我们已经在2011年升级了，请醒来吧！
...Who cares IE6 we are in 2011 upgrade and wake up please!
如果您用于某些文本字段，则使用类
并在html代码中使用
，或者如果您想对所有输入类型文本字段执行此操作，则意味着使用
并在html代码中
if you are using for certain text field then use the class
and in html code use
or if u want to do this for all the input type text field means use
and in html code
但这在 IE<9 中不起作用，但是，您可以使用以下命令让 IE 支持：
CSS3Pie
That won't work in IE<9 though, however, you can make IEs support that using:
CSS3Pie
W3C 文档关于“border-radius”属性的说明：“在 IE9+ 中受支持， Firefox、Chrome、Safari 和 Opera”。
因此我假设您正在 IE8 或更低版本上进行测试。
对于“常规元素”，有一个与 IE8 和 IE8 兼容的解决方案。其他旧的/较差的浏览器。见下文。
HTML：
CSS：
您需要创建 roundedCorner_right.png 和roundedCorner_left.png。这些是 IE8（及以下）的解决方法，可以伪造圆角功能。
因此，在上面的示例中，我们将左圆角应用于包含 div 中的第一个 span 元素，&我们将右圆角应用于包含的 div。这些图像与浏览器提供的“方角”和“方角”重叠。给人一种成为圆形元素一部分的错觉。
输入的想法是执行相同的逻辑。然而，input是一个空元素，“元素是空的，它只包含属性”，换句话说，你不能将span包装到input中，例如
然后像前面的示例一样使用背景图像。因此，解决方案似乎是做相反的事情：将输入包装到另一个元素中。请参阅此答案IE 中输入元素的圆角
W3C doc says regarding "border-radius" property: "supported in IE9+, Firefox, Chrome, Safari, and Opera".
Hence I assume you're testing on IE8 or below.
For "regular elements" there is a solution compatible with IE8 & other old/poor browsers. See below.
HTML:
CSS:
You need to create both roundedCorner_right.png & roundedCorner_left.png. These are work around for IE8 (& below) to fake the rounded corner feature.
So in this example above we apply the left rounded corner to the first span element in the containing div, & we apply the right rounded corner to the containing div. These images overlap the browser-provided "squary corners" & give the illusion of being part of a rounded element.
The idea for inputs would be to do the same logic. However, input is an empty element, " element is empty, it contains attributes only", in other word, you cannot wrap a span into an input such as
<input><span class="myCoolItem"></span></input>to then use background images like in the previous example.Hence the solution seems to be to do the opposite: wrap the input into another element. see this answer rounded corners of input elements in IE
从手机上书写，但 curvycorners 确实很好，因为只有当浏览器默认不支持它时，它才会添加自己的边框。换句话说，已经支持某些 CSS3 的浏览器将使用自己的系统来提供角点。
https://code.google.com/p/curvycorners/
Writing from phone, but curvycorners is really good, since it adds it's own borders only if browser doesn't support it by default. In other words, browsers which already support some CSS3 will use their own system to provide corners.
https://code.google.com/p/curvycorners/