爲什麽IE6浏覽器下lineheight屬性不管用了

为什么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

更多相关文章
  • IE7浏覽器下CSS屬性選擇器二三事
    一.为何专门说起IE7 以前,或者说数年前,我们从事桌面端网页开发的时候,基本上都还要兼顾IE6浏览器, 即使有些特性,IE7支持,我们也会忽略之.于是,我们会不自然地把IE6和IE7浏览器归为一路货色,研究的多半是两个浏览器共性的东西,比方说haslayout之类的. 但是,最近1~2年,至少我个
  • IE6浏览器下如何设置div的高度:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在IE6浏览器下,我们可能无法随心所欲的设置一个div的高度,因为在IE6浏览器下,div的高度好像和字体大小联系在一起的,如
  • IE6浏览器下3px解决方法:IE6下的3px问题的产生主要应该归咎于书写不规范造成的,比如我们要写一个左右两列的结构,代码如下: <!DOCTYPE html> <html> <head> <meta charse
  • IE6 浏览器下,有时会出现左右边线消失的情况,其他浏览器显示正常 页面滚动的时候会时断时续,刷新后边框有时又会出现了 解决辦法是 给 这个容器设置背景颜色,然后刷新就正常了. 本文来自:http://www.zoneself.org/2012/03/06/content_1082.html
  • [1]onfocus = "this.blur()"//得到焦点时,失去焦点 e.g. <a href="#" onfocus = "this.blur()">test</a> [2]使用HTML标签的特性 hide ...
  • 文章转自:http://www.zhangxinxu.com/wordpress/?p=783   让其他ie浏览器支持css3属性
  • function getsupportedprop(proparray){ var root=document.documentElement; //reference root element of documen
  • Javascript檢測浏覽器對CSS屬性的支持  /* supports */
        //检测浏览器对CSS属性的支持 supports = (function() {
一周排行