你的位置:首页 > Java教程

[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