在FF和Chrome中表現形式不同的表格樣式

我有一個窗體，其背後有一個圖像，在FF中，我可以將窗體移動到較低位置，並且它後面的圖像保持原位。但在Chrome中，圖像和表單一起移動。無論如何，我可以讓表單只能在Chrome中移動。在FF和Chrome中表現形式不同的表格樣式

爲形式的代碼是：

<div id="css">  
     <fieldset> 
<form action="contact.php" name="myForm" method="post" onsubmit="return validateForm();"> 

    <input onfocus="this.value=''"" value="Name" 
type="text" name="cf_name"> 


    <input onfocus="this.value=''"" value="Email" type="text" name="cf_email"> 

    <input onfocus="this.value=''"" value="Website" 
type="text" name="cf_website"> 

    <textarea name="cf_message" onfocus="this.value=''"" 
    >Message</textarea> 
<p class="submit"> <input type="submit" value="Send"></p> 
</form> 
</fieldset> 
</div>

的CSS是：

#css fieldset 
{ 
background: url(images/notepad_about1.png) no-repeat; 
border:0px; 
height:560px; 
margin: 0; padding: 0; 

} 

#css input{ 

border-radius:5px; 
border:medium none; 
color:#000; 
display:block; 
font-size:2.75em; 
width:450px; 
margin:0 0 10px; 
padding:8px; 
cursor: default; 
background-image: none; 
background-color: #000cff; 
opacity: 0.5; 
} 

#css form 
{ 
margin-left:120px; 
margin-top:30px; 
} 

#css textarea{ 
border-radius:5px; 
border:medium none;color:#000; 
display:block; 
font-size:2.60em; 
width:450px; 
margin:0 0 10px; 
padding:8px; 
height:200px; 
background-image: none; 
background-color: #000cff; 
opacity: 0.5; 
font-family: Verdana,Arial,Sans-serif; 
} 

#css .submit input{ 
    background-color: #000; 
    opacity: 9.5; 
    font-size:1.75em; 
    width:100px; 
    color:#fff; 
} 

#css .submit input:hover{ 
    background-color: #000cff; 
}

我目前擁有的圖像作爲fieldset標籤的背景。然後，我使用3210將窗體移動到較低的位置，並且在FF中工作，但在Chrome中移動圖像和窗體。無論如何要解決這個問題嗎？

由於

來源

2011-12-19 user1060444

您可以在FF/Chrome中添加圖片。或者更好的添加一個鏈接到這個例子。 – 2011-12-19 14:17:39

此外，只是FYI，當試圖在瀏覽器中獲得相同的外觀時，造型表單和表單元素非常困難。 – cdeszaq 2011-12-19 14:28:41

的#css形式

來源

2011-12-19 14:26:53 Parzifal

我還建議使用'background：url（images/notepad_about1.png）top center no-repeat;' – JonMack 2011-12-19 16:47:49

雖然fieldset元件語法允許包含一個form元件上的使用padding-top: 30px代替margin-top: 30px，例如嵌套是不常見的，並且通常沒有用的。我建議將它們嵌套爲正常方式，form包含fieldset（或者可能是div - fieldset目前無效，因爲它不包含legend元素，但這主要是形式化）。然後，您可以在form元素上設置背景，並在fieldset元素上設置位移，並且這應該以跨瀏覽器的方式工作。或者，您可以直接使用包含字段的form，並在form上設置背景圖像，併爲padding-top設置合適的值以創建（看起來像）所需的效果。

來源

2011-12-19 14:30:27

在FF和Chrome中表現形式不同的表格樣式

回答

相關問題