61,112
社区成员
发帖
与我相关
我的任务
分享麻烦CSS高手帮我看看怎么解决高度不一致问题
想实现所有的都垂直居中,在DW CS中显示时垂直的,但使用IE7却怎么也不能居中.怎么回事？另外下拉菜单和单行输入框高度为什么不一呢？还有这段效果里面有两个图，第一个使用背景，第二个怎么办，用img吗？
DW CS显示
IE7中显示：
代码
<!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=gb2312" />
<title>Web Template - Web 2.0!</title>
<style type="text/css">
<!--
#middle{
width:711px;
float:left;
}
#middle form.search{
width:610px;
height:40px;
margin:0 auto; padding:0 0 0 40px;
background:url(search-i.jpg) no-repeat left center;
}
#middle h2{
color:#70B61D;
font:16px/40px "Bookman Old Style", serif;
display: inline;
margin: auto 0;
}
#middle h2 span {
color:#E17A04;
}
#middle h3{
color:#000000;
font:bold 12px/40px Verdana;
display: inline;
}
#middle select.search{width:120px;height:18px;}
#middle input.keywords{
width:100px;
height:18px;
}
#middle input.go{
width:54px;
height:19px;
background:url(search_btn.jpg) no-repeat 0 0;
margin: 10px 0px 5px 15px;
border:none;
cursor:pointer;
}
#middle #feature{
width:224px; height:600px;
padding:25px 15px 25px 20px;
float:left;
border-right-width: 1px;
border-right-style: dashed;
border-right-color: #CCCCCC;
}
#middle #section{width:425px; height:600px; padding:25px 5px 25px 20px; float:left;} -->
</style></head>
<body><div id="middle">
<form name="search" action="#" method="post" class="search">
<h2><span>Quick</span> Search: </h2><img src="dot.gif" width="7" height="7" border="0" />
<h3>Category</h3><select name="searchlist" class="search"></select><input name="searchkey" type="text" class="keywords"/><input type="submit" value="" name="Search" alt="Search" class="go"/>
</form>
<div id="feature">abc
</div>
<div id="section">def</div>
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
ddcatlee 2008-04-15
- 打赏
- 举报
背景可以应用在所有元素上，只是行内元素的背景范围是其内容范围，你可以增加padding来扩大行内元素的背景范围
jellday 2008-04-15
- 打赏
- 举报
"一个元素里用了背景，你就不会在里边嵌套的元素在用背景？？"
我早想到了,但是实现起来不行啊,只有block元素才能有背景,而block的话又无法在一条线上
我早想到了,但是实现起来不行啊,只有block元素才能有背景,而block的话又无法在一条线上
jellday 2008-04-15
- 打赏
- 举报
"背景可以应用在所有元素上，只是行内元素的背景范围是其内容范围，你可以增加padding来扩大行内元素的背景范围"
还真是,kao,被dreamweaver的可视化欺骗了,编辑时不显示背景图
还真是,kao,被dreamweaver的可视化欺骗了,编辑时不显示背景图
mataofq 2008-04-15
- 打赏
- 举报
[Quote=引用 2 楼 jellday 的回复:]
输入框高度解决,将select高度去掉。谢谢！！可是为什么加上height反而不行呢？padding加不加，据我试验，好像没关系。
后面一个问题，是从规范的角度问得，因为我记得辅助性的图片都应该是在背景，而不是用img。
[/Quote]
汗一个。。。
input、select解释不一样，就算你定义了相同的height视觉上也是不一样的
规范是正确的。但是你的灵活运用啊
一个元素里用了背景，你就不会在里边嵌套的元素在用背景？？
输入框高度解决,将select高度去掉。谢谢！！可是为什么加上height反而不行呢？padding加不加，据我试验，好像没关系。
后面一个问题，是从规范的角度问得，因为我记得辅助性的图片都应该是在背景，而不是用img。
[/Quote]
汗一个。。。
input、select解释不一样，就算你定义了相同的height视觉上也是不一样的
规范是正确的。但是你的灵活运用啊
一个元素里用了背景，你就不会在里边嵌套的元素在用背景？？
jellday 2008-04-15
- 打赏
- 举报
输入框高度解决,将select高度去掉。谢谢！！可是为什么加上height反而不行呢？padding加不加，据我试验，好像没关系。
后面一个问题，是从规范的角度问得，因为我记得辅助性的图片都应该是在背景，而不是用img。
后面一个问题，是从规范的角度问得，因为我记得辅助性的图片都应该是在背景，而不是用img。
zl_c 2008-04-14
- 打赏
- 举报
垂直居中的问题:用另一个表元来放图片,或者加上图片的align="absmiddle"
输入框高度:IE7中会继承上级对象的padding属性．
最后一问题没看明白．
输入框高度:IE7中会继承上级对象的padding属性．
#middle select.search{
width:120px;
padding:0px;
}
#middle input.keywords{
width:100px;
height:18px;
padding:0px;
}最后一问题没看明白．
