css - - 跨浏览器中的 webkit 支持

Question

我正在使用-webkit-border-radius:5px; -moz-border-radius:5px;div 的半径。它在 chrome 和 sfari 中运行良好，但在 Mozilla Firefox 和 IE8 中运行良好。我该如何解决

<div style="background-color:#f7f7f7; width:340px; height:175px; -webkit-border-radius:6px;-moz-border-radius:6px;">
              <div style="padding-top:20px;text-align:center"><input name="email" type="text" class="required emailcheck" placeholder="Enter your email address" id="email" style="height:25px; width:200px;-moz-border-radius:5px; -webkit-border-radius:5px; "></div>

              <div style="padding-top:20px;text-align:center"><input type="password" name="password" id="password" placeholder="Password"  class="required" style="height:25px; width:200px; -webkit-border-radius:5px;-moz-border-radius:5px;"></div>


          </div>​

JS 小提琴http://jsfiddle.net/ranasaani/uHHLX/

Answer 1

除非您使用图像或用于圆角的行为 htc 文件，否则您无法使其工作。

要检查对某些东西的支持，请使用 caniuse.com：http://caniuse.com/#search=border-radius

要在 IE8 及以下版本中获得圆角，请查看以下页面：

http://jonraasch.com/blog/css-rounded-corners-in-all-browsers

尽管这些解决方案不太理想，但我担心它们是唯一的方法......

Answer 2

IE8及以下不支持border-radius(css3)
为mozilla和IE9工作，你可能需要包含
border-radius:5px;