Community Learn Tools Library Leisure
search
English
Home > Web Front-end > HTML Tutorial > input输入框的border-radius属性在IE8下的完美兼容_html/css_WEB-ITnose

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

WBOY
Release： 2016-06-24 11:36:19
Original
1311 people have browsed it

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

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

   

                     正常情况                                                            IE8下有黑边

解决办法：

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

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

Related labels：
input输入框的border-radius属性在IE8下的完美兼容
source：php.cn
Previous article：关于网页移动屏幕触发的CSS_html/css_WEB-ITnose Next article：网站目录结构问题，急_html/css_WEB-ITnose
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...
From 2024-04-29 11:01:01
0
3
2079
How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?
From 2024-04-23 00:22:19
0
11
2242
The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.
From 2024-04-19 15:37:47
0
1
1888
There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...
From 2024-04-18 23:52:34
0
1
1767
Where is the courseware about CSS mind mapping? Courseware
From 2024-04-16 10:10:18
0
0
1804
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template