2011-03-08 50 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簡單地丟棄實際的表單元素,絕對奇怪的行爲...