2011-03-08 51 views
1

我有一个通过ajax(facebox)生成的表单。表单失去所有样式?

在FF,Chrome,IE> 8这一切工作正常,但在IE < 9窗体没有样式。 Image Diff

什么会导致此*?

*由于CSS3导致某些效果丢失,但css3不是高度/宽度/填充。


使用IE的 “元素源与风格” 上 组名输入给:

IE8

<html> 
<head><style> 
BODY 
{ 
    color: #4f5155; 
    padding-top: 0px; 
    padding-right: 0px; 
    padding-bottom: 0px; 
    padding-left: 0px; 
    font-family: Tahoma, Helvetica, Arial, sans-serif; 
    font-size: 12px; 
    margin-top: 0px; 
    margin-right: 0px; 
    margin-bottom: 0px; 
    margin-left: 0px; 
    background-image: url("../images/pageBackground.png"); 
    background-attachment: scroll; 
    background-repeat: no-repeat; 
    background-position-x: center; 
    background-position-y: top; 
    background-color: rgb(58, 58, 58); 
} 
#facebox 
{ 
    left: 0px; 
    top: 0px; 
    text-align: left; 
    position: absolute; 
    z-index: 100; 
} 
#facebox .popup 
{ 
    position: relative; 
} 
#facebox .content 
{ 
    width: 370px; 
    padding-top: 10px; 
    padding-right: 10px; 
    padding-bottom: 10px; 
    padding-left: 10px; 
    display: table; 
    background-image: none; 
    background-attachment: scroll; 
    background-repeat: repeat; 
    background-position-x: 0%; 
    background-position-y: 0%; 
    background-color: rgb(255, 255, 255); 
} 

</style></head> 
<body><div id="facebox" style="left: 477px; top: 40px;"><div class="popup"><div class="content"><div class="inputSeperator"> 

<input name="name" type="text" /> 

</div></div></div></div></body></html> 

IE9

<html> 
<head><style> 
body 
{ 
    color: #4f5155; 
    padding-top: 0px; 
    padding-right: 0px; 
    padding-bottom: 0px; 
    padding-left: 0px; 
    font-family: Tahoma, Helvetica, Arial, sans-serif; 
    font-size: 12px; 
    margin-top: 0px; 
    margin-right: 0px; 
    margin-bottom: 0px; 
    margin-left: 0px; 
    background-image: url("../images/pageBackground.png"); 
    background-attachment: scroll; 
    background-repeat: no-repeat; 
    background-position-x: center; 
    background-position-y: top; 
    background-size: auto; 
    background-origin: padding-box; 
    background-clip: border-box; 
    background-color: rgb(58, 58, 58); 
} 
form#newForm 
{ 
    width: 500px; 
    padding-top: 16px; 
    padding-right: 16px; 
    padding-bottom: 16px; 
    padding-left: 16px; 
    font-weight: normal; 
    border-top-color: #e5e5e5; 
    border-right-color: #e5e5e5; 
    border-bottom-color: #e5e5e5; 
    border-left-color: #e5e5e5; 
    border-top-width: 1px; 
    border-right-width: 1px; 
    border-bottom-width: 1px; 
    border-left-width: 1px; 
    border-top-style: solid; 
    border-right-style: solid; 
    border-bottom-style: solid; 
    border-left-style: solid; 
    border-top-left-radius: 5px; 
    border-top-right-radius: 5px; 
    border-bottom-right-radius: 5px; 
    border-bottom-left-radius: 5px; 
    box-shadow: 0px 4px 18px rgba(200,200,200,1); 
    background-image: none; 
    background-attachment: scroll; 
    background-repeat: repeat; 
    background-position-x: 0%; 
    background-position-y: 0%; 
    background-size: auto; 
    background-origin: padding-box; 
    background-clip: border-box; 
    background-color: rgb(255, 255, 255); 
} 
form#newForm input[type='text'], form#newForm input[type='password'], form#newForm textarea, form#newForm select 
{ 
    width: 97%; 
    color: #555; 
    padding-top: 3px; 
    padding-right: 3px; 
    padding-bottom: 3px; 
    padding-left: 3px; 
    font-size: 16px; 
    margin-top: 2px; 
    margin-right: 6px; 
    margin-bottom: 16px; 
    border-top-color: #e5e5e5; 
    border-right-color: #e5e5e5; 
    border-bottom-color: #e5e5e5; 
    border-left-color: #e5e5e5; 
    border-top-width: 1px; 
    border-right-width: 1px; 
    border-bottom-width: 1px; 
    border-left-width: 1px; 
    border-top-style: solid; 
    border-right-style: solid; 
    border-bottom-style: solid; 
    border-left-style: solid; 
    background-image: none; 
    background-attachment: scroll; 
    background-repeat: repeat; 
    background-position-x: 0%; 
    background-position-y: 0%; 
    background-size: auto; 
    background-origin: padding-box; 
    background-clip: border-box; 
    background-color: rgb(251, 251, 251); 
} 
#facebox 
{ 
    left: 0px; 
    top: 0px; 
    text-align: left; 
    position: absolute; 
    z-index: 100; 
} 
#facebox .popup 
{ 
    border-top-color: rgba(0,0,0,0); 
    border-right-color: rgba(0,0,0,0); 
    border-bottom-color: rgba(0,0,0,0); 
    border-left-color: rgba(0,0,0,0); 
    border-top-width: 3px; 
    border-right-width: 3px; 
    border-bottom-width: 3px; 
    border-left-width: 3px; 
    border-top-style: solid; 
    border-right-style: solid; 
    border-bottom-style: solid; 
    border-left-style: solid; 
    position: relative; 
    border-top-left-radius: 5px; 
    border-top-right-radius: 5px; 
    border-bottom-right-radius: 5px; 
    border-bottom-left-radius: 5px; 
    box-shadow: 0px 0px 18px rgba(0,0,0,0.4); 
} 
#facebox .content 
{ 
    width: 370px; 
    padding-top: 10px; 
    padding-right: 10px; 
    padding-bottom: 10px; 
    padding-left: 10px; 
    display: table; 
    border-top-left-radius: 4px; 
    border-top-right-radius: 4px; 
    border-bottom-right-radius: 4px; 
    border-bottom-left-radius: 4px; 
    background-image: none; 
    background-attachment: scroll; 
    background-repeat: repeat; 
    background-position-x: 0%; 
    background-position-y: 0%; 
    background-size: auto; 
    background-origin: padding-box; 
    background-clip: border-box; 
    background-color: rgb(255, 255, 255); 
} 

</style></head> 
<body><div id="facebox" style="left: 397.5px; top: 40.5px;"><div class="popup"><div class="content"><form id="newForm" action="none" method="POST"><div class="inputSeperator"> 

<input name="name" type="text" /> 

</div></form></div></div></div></body></html> 
+0

一个活链接将是有益的 – 2011-03-08 21:06:16

+0

截图都不错,但你真的应该张贴相关的代码。 – drudge 2011-03-08 21:08:07

+2

+1不明白为什么这是downvoted。 – 2011-03-08 21:11:48

回答

0

发现它是什么,

格式不正确的html,

如果你看看html,会看到一个额外的结尾div。

由于某种原因,这是造成IE8简单地丢弃实际的表单元素,绝对奇怪的行为...