BUG症状:当在一个容器里文字和img、input、textarea、select、object等元素相连的时候,对这个容器设置的line-height数值会失效;
受影响的浏览器:
Microsoft Internet Explorer 5.01 / Windows
Microsoft Internet Explorer 5.5 / Windows
Microsoft Internet Explorer 6
解决方法:
对和文字相连接的img、input、textarea、select、object等元素加以属性
margin: { 所属line-height-自身高度)/2px 0; vertical-align:middle }
不是IE问题,是因为你把文字和图片一起排版,这个属性不支持图片,你把图片删除就好了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/base.css">
<style>
.hh li{ line-height:50px; }
.hh li img{margin:20px 0;vertical-align:middle; } <!--所属line-height-自身img,input,select,object高度)/2px -->
</style>
<title>博客园smallmuda.cnblogs.com</title>
</head>
<body>
<ul class="hh">
<li id="qwe"><a href="http://smallmuda.cnblogs.com">1.博客园smallmuda.cnblogs.com</a><img src="http://static.cnblogs.com/images/icon_rss.gif" /></li>
<li id="qwe"><a href="http://smallmuda.cnblogs.com/">2.博客园smallmuda.cnblogs.com</a><img src="http://static.cnblogs.com/images/icon_rss.gif" /></li>
<li id="qwe"><a href="http://smallmuda.cnblogs.com">3.v</a><img src="http://static.cnblogs.com/images/icon_rss.gif" /></li>
<li id="qwe"><a href="http://smallmuda.cnblogs.com/">4.博客园smallmuda.cnblogs.com</a><img src="http://static.cnblogs.com/images/icon_rss.gif" /></li>
<li><a href="http://smallmuda.cnblogs.com/">5.博客园smallmuda.cnblogs.com</a></li>
<li><a href="http://smallmuda.cnblogs.com/">6.博客园smallmuda.cnblogs.com</a></li>
<li><a href="http://smallmuda.cnblogs.com/">7.博客园smallmuda.cnblogs.com</a></li>
<li><a href="http://smallmuda.cnblogs.com/">8.博客园smallmuda.cnblogs.com</a></li>
</ul>
</body>
</html>
http://toysen.blog.163.com/blog/static/357391720116291129116/
margin: (所属line-height-自身img,input,select,object高度)/2px 0;vertical-align:middle;
分享到:
相关推荐
常常使用line-height设置内容(图片、文字)行高上下居中样式效果。 一、line-height行高语法 复制代码代码如下:line-height:22px.jb51div{line-height:22px}line-height:200%.jb51div{line-height:200%} line-...
完美排版--基于Python实现的支持向量机课程设计.docx完美排版--基于Python实现的支持向量机课程设计.docx完美排版--基于Python实现的支持向量机课程设计.docx完美排版--基于Python实现的支持向量机课程设计.docx完美...
2011-排版心得-《文字标题设计注意事项》-@红策划
line-height对于页面中字体的行距等排版方面的效果至关重要,这里为大家整理了CSS中的line-height行高属性学习教程,包括line-height的各种取值设定等方面,需要的朋友可以参考下
word排版--整页剪切.docx
排版工具、精巧强悍排版工具、支持一件粘贴、一键排版、自动识别段落、文字换行、简繁体转换。以及去掉html标签、每篇文章自动加结束语 开头语等;强烈推荐、完全免费。
是初学阶段学员的良好教程, 相信看后受益匪浅! 里面详细讲解了各种图像与文字的混合排版方式。
云熙设计拆单软件-排版生产软件 -云承天工排版软件-云熙分拣打包软件合集 1、不带锁软件 2、基本参数 3、视频教学 4、说明文件 5、常见的图集
消毒供应中心护理人员岗位职责-排版---精品资料.pdf
办公自动化PowerPoint 2013 美颜计划PPT文字排版设计-1.mp4
办公自动化PowerPoint 2013 美颜计划PPT文字排版设计-2.mp4
LaTex教程--latex排版学习笔记---入门提高.pdf
用div将图片与文字更加清晰的分离开来,能够更好的理解html
内容 创意 图标 图表 图片 排版 配色-如何让你的PPT更出彩PPT模板.pptx
IE6浏览器兼容问题总结及CSS排版注意地方 列举IE6中10个不得不注意的问题 重构你的代码
排版后---黑中铁监理环水保监理工作总结.docx
WORD排版技术-段落的排版.ppt
排版后---黑中铁监理环水保监理工作总结整理.pdf
排版后---黑中铁监理环水保监理工作计划总结.doc
有关复杂图形,数学代号字符的一个标准排版实例 有需要的看一下