星空网 > 软件开发 > Java

为什么IE6浏览器下line

为什么IE6浏览器下line-height属性不管用了:
建议:尽可能的手写代码,可以有效的提高学习效率和深度。
并不是所有的情况都会导致line-height属性在IE6浏览器下失效, 而是在特定条件才会遇到。例如以下代码就是正常的:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">.mytest{ width: 100px; height: 40px; border: 1px solid red; font-size: 14px; line-height: 40px;}</style></head><body><div class="mytest">蚂蚁部落</div></body></html>

以上代码在IE浏览器中运行一切正常。再看下面这种情况:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">.mytest{ width:300px; height:80px; border:1px solid red; line-height:80px;}</style></head><body><ul> <li class="mytest">蚂蚁部落  <input type="text" name="mytext" /> </li></ul></body></html>

以上代码在其他主流浏览器中貌似是上下垂直居中(如果仔细观察会发现其实也没有精准的居中),但是在IE6中,line-height彻底失效了。也就是说如果文本与img、input、textarea、select和bject等元素连在一起使用的时候就会导致这种情况。
解决方法如下:
为img、input、textarea、select和bject等元素添加margin属性和vertical-align属性,margin-top和margin-bottom的属性值设置为:line-height值减去相应元素的高度然后再除以二。以上代码修改如下:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">.mytest { width: 300px; height: 40px; border: 1px solid red; line-height: 40px;}input { vertical-align: middle; height: 20px; margin-top: 10px; margin-bottom: 10px;}</style></head><body><ul> <li class="mytest">蚂蚁部落  <input type="text" name="mytext" /> </li></ul></body></html>

但是以上代码只能够满足在IE6下垂直居中对齐(精准垂直居中对齐了),但是在其他浏览器下只能够貌似垂直居中的,不过对于图片是个例外,可以在任何浏览器中达到精准垂直居中对齐。也就是说如果是表单标签建议是padding使之精准垂直居中对齐。

原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0405/145.html




原标题:为什么IE6浏览器下line

关键词:ie

ie
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

环新网络:https://www.ikjzd.com/w/2307
ishare:https://www.ikjzd.com/w/2308
shop stats:https://www.ikjzd.com/w/2309
亚马逊直评:https://www.ikjzd.com/w/231
美国社交电商Passfeed:https://www.ikjzd.com/w/2310
韩国综合性网站Auction:https://www.ikjzd.com/w/2311
37号文今后是否会更新?一文详解关键信息 :https://www.kjdsnews.com/a/1836441.html
探讨内地人开设香港账户的可行性 :https://www.kjdsnews.com/a/1836442.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流