在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中表现形式不同的表格样式

回答

相关问题