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工作，你可能需要包括
边界半径：5像素;

-webkit支持跨浏览器

2 个答案: