简体   繁体   English

边界半径在IE上不起作用,我使用什么库或CSS hack

[英]border radius not working on IE, what library or css hack do I use

I want to style some forms on my app in IE8 but I always have a problem with css3. 我想在IE8的应用程序中设置样式,但是css3总是有问题。 I already tried with css3pie but I'm not very satisfied. 我已经尝试过使用css3pie,但是我不太满意。 I would be very happy if there is a jQuery plugin to do that. 如果可以使用jQuery插件,我将非常高兴。 I wonder if it is possible to trick IE8 with Something like. 我想知道是否有可能用类似的东西欺骗IE8。

<meta http-equiv="X-UA-Compatible" content="IE=9" />

If someone's solved this please let me know. 如果有人解决了这个问题,请告诉我。 Thank's. 谢谢。

Check this out: Rounded Corners in Internet Explorer 检查一下: Internet Explorer中的圆角

At the bottom there are some links to different solutions. 底部有一些指向不同解决方案的链接。

Here are your options: 这是您的选择:

  • Use some sort of javascript-based pseudo-compatibility library (such as css3pie). 使用某种基于javascript的伪兼容库(例如css3pie)。 Since these libraries basically resort to hacks in a controlled way, your results are going to be somewhat correct, but not necessarily perfect. 由于这些库基本上都是以受控方式求助于黑客程序,因此您的结果将是正确的,但不一定是完美的。
  • Use a different / additional stylesheet for IE8 (and earlier), adding rounded borders using old-school methods (images for the corners, with some wild floating and positioning tricks; or worse, abusing list item bullet points for rounded corners). 对IE8(及更早版本)使用其他样式/其他样式表,并使用传统方法添加圆角边框(图像为转角,带有一些疯狂的浮动和定位技巧;更糟糕的是,滥用列表项的圆角)。
  • Use old-school methods for all browsers - this will work, but you will miss out on smoothly-scaled vector corners (ie, it will pixelate when the user zooms in). 所有浏览器使用老式的方法-可以使用,但是您会错过平滑缩放的矢量角(即,当用户放大时它将像素化)。
  • Make a design that looks good enough without the rounded borders and let IE8 degrade gracefully. 进行外观设计,使其外观足够好,没有圆形边框,并使IE8正常降级。 (This is actually the canonical solution as envisioned by the designers of HTML and CSS.) (实际上,这是HTML和CSS设计人员所设想的规范解决方案。)

Some notes: 一些注意事项:

  • IE8 (and earlier) is not the only browser that doesn't implement border-radius; IE8(及更早版本)并不是唯一不实现边界半径的浏览器; Opera Mini, a fairly popular mobile browser, hasn't implemented them yet, and both Desktop Opera and Opera Mobile didn't include them either until version 10. Opera Mini是一种相当流行的移动浏览器,尚未实现,而Opera版本和Opera Mobile都没有包含它们,直到版本10。
  • Hacks that work on IE8 may not work on IE6 and 7, so if you choose that path, be prepared to manage four different stylesheets instead of one. 适用于IE8的hacks可能不适用于IE6和7,因此,如果您选择该路径,请准备好管理四个不同的样式表而不是一个。
  • Many of the usual old-school rounded corner hacks are hard or impossible to implement in fluid layouts, because they rely on absolute positioning and knowledge of other elements' sizes. 许多常见的老式圆角黑客很难或不可能在流畅的布局中实施,因为它们依赖于绝对定位和其他元素尺寸的知识。
  • Javascript-based solutions obviously break if the user has Javascript disabled. 如果用户禁用了Javascript,则基于Javascript的解决方案显然会中断。
  • Over time, people will move to newer IE versions. 随着时间的流逝,人们转向较新的IE版本。 IE8 is the most prominent version right now, but that's not going to last forever. IE8是目前最杰出的版本,但这不会永远持续下去。

You could try this https://github.com/brandonaaron/jquery-cssHooks 您可以尝试一下https://github.com/brandonaaron/jquery-cssHooks

Haven't used it for border-radius, but other css3. 尚未将其用于边界半径,而是用于其他css3。 You would have to use borderradiusalt.js and apply it like this: 您将必须使用borderradiusalt.js并将其应用如下:

$('#myElement').css('border-radius', '3px 3px 3px 3px');

You also have to put border-radius.htc in the web root(eg where index.html is located) or the page that uses the js. 您还必须将border-radius.htc放在Web根目录(例如index.html所在的位置)或使用js的页面中。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM