当前位置：首页 → 问答吧 → 为什么这里line-height无效？

为什么这里line-height无效？

时间：2011-10-30

来源：互联网

HTML code

<html>
    <head>
        <title>内容页</title>
        <meta http-equiv="content-type" content="text/html;charset=gb2312" />
    </head>
    <style type="text/css">
        
        
        /*标题样式*/
        #title{
            font:bold 25px 黑体;
            text-align:center;
        }
            
            
        /*除标题外文字样式*/
        #word{
            font:15px 宋体;
            line-height:20px;
        }    
        
        /*整个表单左填充15px样式*/
        #allForm{
            padding-left:15px;
        }
        
        /*表单距离10px样式（文本外边距）*/
        .spaceMargin{
            margin-left:10px;    
        }
    </style>
    <body>
        <div id="title">注册页</div>
        <div id="word">
            <form method="post" action="" enctype="multipart/from-data" id="allForm">
                姓名：
                <input name="name" type="text" size="20" maxlength="6" class="spaceMargin" /><br/>
                密码：
                <input name="password" type="password" size="21" class="spaceMargin" /><br/>
                性别：
                <input name="sex" type="radio" value="男" checked="checked" />男&nbsp;
                <input name="sex" type="radio" value="女" />女<br/>
                照片：
                <input name="files" type="file" class="spaceMargin" /><br/>
                爱好：
                <input name="hobby" type="checkbox" value="书" />书&nbsp;
                <input name="hobby" type="checkbox" value="运动" />运动&nbsp;
                <input name="hobby" type="checkbox" value="聊天"  />聊天<br/>
                
                所在城市：
                <select name="city" size="1">
                    <option value="0" selected="selected">请选择</option>
                    <option value="1" >上海</option>
                    <option value="2" >北京</option>
                    <option value="3" >南京</option>
                </select><br/>
                <br/>协议：<br/>
                <textarea cols="27" rows="6" readonly="readonly">请遵守相关规定，互相尊重，营造良好氛围。</textarea><br/>
                <input name="hasread" type="checkbox" value="读过没" checked="checked" />我认真阅读并接受以上协议。<br/>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input name="提交" type="submit" value="提交" disabled="disabled" />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input name="提交" type="reset" value="重置" />
            </form>
        </div>
    </body>
</html>

#word的ID标识中设置了line-height:20px;
而且用<div id="word">括起来了，
为什么这个表单元素中行高都没变？

作者: fantassly2010 发布时间: 2011-10-30

#word form{
line-height:60px;
}

作者: qixiaoqi1987 发布时间: 2011-10-30

还是没用啊- - 2楼。。

作者: fantassly2010 发布时间: 2011-10-30

IE6当在一个容器里文字和img、input、textarea、select、object 等元素相连的时候，对这个容器设

置的line-height数值会失效。

解决问题思路：使容器里面的文字、img、input、textarea、 select、object（ie6只是支持文字）之

间有间距，并且是他们是居中的，那就只有模拟line-height属性了，说道这大家也就知道解决方案

了。

解决的办法就是对和文字相连接的img、input、textarea、select、object等元素加以属性

margin: (所属line-height-自身高度)/2px 0（实现了上下的间距）;

vertical-align:middle（让他们居中）。

作者: javaxi 发布时间: 2011-10-30

为什么这里line-height无效？

热门阅读

热门下载