Question

我有一个在其后面有图像的表单，在FF中我可以将表单移动到较低的位置并且其后面的图像保持原样。但在Chrome中，图像和表单一起移动。无论如何，我可以让表单只在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标记中将图片作为背景。然后我使用#CSS form移动下方的表单，这在FF中有效，但在Chrome中它会移动图像和表单。无论如何要解决这个问题吗？

由于

Answer 1

在#css表单

上使用padding-top: 30px代替margin-top: 30px

Answer 2

虽然语法上允许fieldset元素包含form元素，但这种嵌套并不常见，通常没用。我建议以正常方式嵌套它们，form包含fieldset（或者div - fieldset目前无效，因为它不包含legend元素，但这主要是一种形式）。然后，您可以在form元素上设置背景，在fieldset元素上设置位移，这应该以跨浏览器的方式工作。或者，您可以直接使用包含字段的form，并在form上设置背景图片，并为padding-top设置合适的值以创建（看似是什么）所需的效果。

在FF和Chrome中表现不同的表单样式

2 个答案: