打印

[求助] 我要疯了，大家看看这段CSS代码吧

kometo [楼主]

初级会员

帖子: 66
体力: 154
威望: 0
离线: 115 天

1^# 大中小发表于 2008-5-29 18:25

我要疯了，大家看看这段代码吧，IE下出现了奇怪的现象，注意我在CSS中标明的A、B两处。

谁能给解释啊？

<!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" />
<title>Insert title here</title>
<style type="text/css">
.EmForm_box {
	font-family: "Lucida Grande", Tahoma, Arial, sans-serif;
	border: 1px solid #666;
	background-color: #FCFAE6;
}
.EmForm_box div.EmForm_list {
	padding: 10px 30px; /* A */
	background-color: #ccffff;
}
/* item */
.EmForm_list .EmForm_item {
	padding: 10px;
	margin: 30px;
	background-color: #ddd;
	_height: 1px; /* B */
}
.EmForm_item div.EmForm_item_input {
	color: #444;
	background-color: #ccc;
	overflow: hidden;
	height: 30px;
}
</style>
</head>
<body>
<div style="width: 550px; margin: auto auto;">
<form>
<div class="EmForm_box">
<div class="EmForm_list">
<div class="EmForm_item">
<div class="EmForm_item_input"></div>
</div>
<div class="EmForm_item">
<div class="EmForm_item_input"><input type='text' value="test"
    style="width: 50%" /></div>
</div>
<div class="EmForm_item">
<div class="EmForm_item_input"><input type='text' value="test" />
</div>
</div>
</div>
<div class="EmForm_list">
<div class="EmForm_item">
<div class="EmForm_item_input"><input type='text' value="test" />
</div>
</div>
<div class="EmForm_item">
<div class="EmForm_item_input"><input type='text' value="test" />
</div>
</div>
<div class="EmForm_item">
<div class="EmForm_item_input">
</div>
</div>
</div>
<div class="EmForm_list"></div>
<div class="EmForm_buttons"></div>
</div>
</form>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

Anti W3C

TOP

做西部数码代理.Cn1元国际45元 | 将虚拟化进行到底

kometo [楼主]

初级会员

帖子: 66
体力: 154
威望: 0
离线: 115 天

2^# 大中小发表于 2008-5-29 18:27

订阅下，等答案

Anti W3C

TOP

美橙vps独立IP月付189元

kometo [楼主]

初级会员

帖子: 66
体力: 154
威望: 0
离线: 115 天

3^# 大中小发表于 2008-5-29 22:06

自顶下吧

Anti W3C

TOP

中央美院远程平面设计进修班

Elking

中级会员

帖子: 170
体力: 339
威望: 0
当前: 广东广州
离线: 1 天

4^# 大中小发表于 2008-5-29 22:29

好华丽的div 我头晕了！！

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

ivanling

Eval

中级会员

帖子: 113
体力: 203
威望: 1
当前: 广东深圳
离线: 5 天

专长 前端制作,JS,策划

5^# 大中小发表于 2008-5-29 23:26

写的时候一定要注意结构啊,把所有的DIV都写在一起,也没有个缩进,时间长了估计自己连结构都会忘记的

TOP

moca

初级会员

帖子: 54
体力: 68
威望: 0

专长 前端制作,JS

6^# 大中小发表于 2008-5-30 09:22

这写的真是...规范点先

TOP

purecss

高级会员

帖子: 370
体力: 791
威望: 0
离线: 35 天

7^# 大中小发表于 2008-5-30 09:24

写入b样式解决了一个问题却又带来另一个问题！
主要是与.EmForm_list .EmForm_item中样式margin: 30px;有关，如果.EmForm_item div.EmForm_item_input中不加入高度height: 30px;的话。又不会出现INPUT多出30px的效果，换句话来说也就不会触发“BUG”，至于解释实在无法给出一个非常严谨的答案。IE6,7还是有这样那样的错误，还好我们看到了ie8的进步，这个问题已经和其它浏览器做的一样好了。另外IE有不少的常见BUG，比如双边距BUG，很多人一开始不解这个原因，见多了，也就知道浮动边距浮动方向的边距会发生加倍现象，这后也就不在问为什么，为什么！这就是它的"BUG"，先用这个词吧，我不知道用什么词会更好更合理一些。但IE还是有很多的"BUG"在不同的环境（设计者加入的不同样式构建了一个环境），有些环境是安全的，有些则是很危险的。所以特别复杂的出现的问题，我们可以先想一想即然后上面找到的问题的根源，那就换个思路，把边界换成补白，如果不能换，那你可以尝试着在那个INPUT上加一个SPAN标签，我可是随便说说加这个标签，行不行只能试试了！对于BUG如果做的页面足够多了见的也自然多，习惯就好了。主要是我们要学习去学习如何去解决问题的方法，而不要去真正去想为什么，错误的东西很多时候不好解析。

http://www.purecss.com.cn

TOP

bxezt2007

新手上路

帖子: 71
体力: 14
威望: 0
离线: 61 天

8^# 大中小发表于 2008-5-30 10:11

<!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" />
<title>Insert title here</title>
<style type="text/css">
.EmForm_box {
	font-family: "Lucida Grande", Tahoma, Arial, sans-serif;
	border: 1px solid #666;
	background-color: #FCFAE6;
}
.EmForm_box div.EmForm_list {
	padding: 10px 30px; /* A */
	background-color: #ccffff;
}
/* item */
.EmForm_list .EmForm_item {
	padding: 10px;
	margin: 30px auto;
	background-color: #ddd;
	/* B */
}
.EmForm_item div.EmForm_item_input {
	color: #444;
	background-color: #ccc;
	overflow: hidden;
	height: 30px;
}
</style>
</head>
<body>
<div style="width: 550px; margin: auto auto;">
<form>
<div class="EmForm_box">
<div class="EmForm_list">
<div class="EmForm_item">
<div class="EmForm_item_input"></div>
</div>
<div class="EmForm_item">
<div class="EmForm_item_input"><input type='text' value="test"
    style="width: 50%" /></div>
</div>
<div class="EmForm_item">
<div class="EmForm_item_input"><input type='text' value="test" />
</div>
</div>
</div>
<div class="EmForm_list">
<div class="EmForm_item">
<div class="EmForm_item_input"><input type='text' value="test" />
</div>
</div>
<div class="EmForm_item">
<div class="EmForm_item_input"><input type='text' value="test" />
</div>
</div>
<div class="EmForm_item">
<div class="EmForm_item_input">
</div>
</div>
</div>
<div class="EmForm_list"></div>
<div class="EmForm_buttons"></div>
</div>
</form>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

看下我做的效果。我修改的地方是：
.EmForm_list .EmForm_item {
padding: 10px;
margin: 30px; background-color: #ddd;
_height: 1px; /* B */
}
换成
.EmForm_list .EmForm_item {
padding: 10px;
margin: 30px auto;
background-color: #ddd;
}

在自动居中的情况中，最好不要用两端定绝对值的方法，而是用auto，至于为什么会在没有浮动的情况下也出现了双倍填充的bug，我还在思考中。

顺便顶下7楼，你写字也不分段，看完也累死了。

[ 本帖最后由 bxezt2007 于 2008-5-30 10:13 编辑 ]

TOP

kometo [楼主]

初级会员

帖子: 66
体力: 154
威望: 0
离线: 115 天

9^# 大中小发表于 2008-6-6 23:01

回楼上的：
我已经注意到这个问题是由于
_height:1px;引起的

而且我知道这似乎是于IE下所谓的has layout引起。

问题是问什么？如果双边距了，问什么第一次出现的位置表现的又何后续的不同

CSS快要写成迷宫了..

Anti W3C

TOP