在工作中我们发现搜索框大部分都是有圆角的,为此作为经验不足的前端人员很容易就想到,给input标签添加border-radius属性不就解决了嘛。不错方法确实是这样,但是不要忘了border-radius是css3属性,IE8不兼容!!!那么问题来了,怎样在IE8下完美兼容呢?

网上有很多关于css3属性在IE8下兼容的方法,需要引入PIE.htc这个文件,相信很容易搜到并下载该文件,但是用上position:relative;behavoior:url(PIE.htc);后发现圆角是实现了,但会莫名的出现黑色边框就像图中这样

 input输入框的border-radius属性在IE8下的完美兼容  input输入框的border-radius属性在IE8下的完美兼容

                     正常情况                                                            IE8下有黑边

解决办法:

将input标签的border:none;外面的圆角边框用外层包裹的标签设置,为了不影响美观在配合margin或padding

最终的到的结果如下图所示,ff chome均达到完美兼容

input输入框的border-radius属性在IE8下的完美兼容

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2022-03-01
  • 2021-12-04
  • 2021-11-03
  • 2021-11-08
  • 2021-12-14
猜你喜欢
  • 2021-04-01
  • 2021-08-02
  • 2022-02-17
  • 2022-12-23
  • 2021-06-12
  • 2022-12-23
  • 2021-09-10
相关资源
相似解决方案