这很难解释。我已经盯着它看了好几个小时了。电子邮件输入会破坏您在字段中输入文本的布局。这是工作示例的链接：http: //dev.artfulideation.com/clients/artfulideation.com/new-header.htm
使用 tab 键在表单中导航也会破坏布局。
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style-new.css">
<div id="featured-top">
<div id="featured-top-container">
<h2>Free <span>Web Presence Report</span></h2>
<img src="images/fwpr-gear.png" />
<div id="featured-top-content">
<p>Your pressence on the web is often hard to track and it can be even harder to understand how it will affect you. Artful Ideation offers a free report of your current strengths and weaknesses in the areas of website design, content structure, and search engine optimization.</p>
</div>
<p>Sign up below to receive your free reoprt!</p>
</br>
<form>
<table>
<tr><td><input type="text" name="name" tabindex="1" value="Name:" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/><td></tr>
<tr><td><input type="text" name="email" tabindex="2" value="Email:" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/><td></tr>
<tr><td><input type="submit" name="submit" tabindex="3" value="Get Yours!" /><td></tr>
</table>
</form>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="js/twitter.js"></script>
<script>
$(function(){
$('#featured-top').click(function(){
$(this).animate({'top':'-318px'}, 600, 'easeOutBounce');
$('#featured-top-container').animate({'top':'304px','left':'82px'}, 600, 'easeOutBounce');
$('#wrap').animate({'margin-top':'365px'}, 600, 'easeOutBounce');
//Add transparent background for click out
$(document.body).append('<div class="transparent-close"></div>');
$('.transparent-close').on('click',function(){
$('#featured-top').animate({'top':'-558px'}, 600, 'easeOutBounce');
$('#featured-top-container').animate({'top':'530px','left':'0px'}, 600, 'easeOutBounce');
$('#wrap').animate({'margin-top':'120px'}, 600, 'easeOutBounce');
$(this).remove();
});
});
});
</script>
此外，这是我正在使用的 css：
*{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
#featured-top{
width: 1180px;
height: 480px;
background-color: #AA2222;
background: #AA2222 url(images/fwpr-background.png) top left repeat;
box-shadow: inset 0 -5px 20px -6px #000;
padding-top: 55px;
cursor: pointer;
overflow: hidden;
position: absolute;
top: -558px;
left: -128px;
z-index: 9999;
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
}
#featured-top-container{
width: 800px;
height: auto;
position: absolute;
top: 530px;
left: 0px;
/*margin: 485px 0 0 35px;*/
font: normal 11px Georgia, Serif;
color: #eee;
clear: both;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
}
#featured-top-container h2{
text-shadow: 1px 1px 0 #333;
}
#featured-top-container h2 span{
font: 20px Kontrapunkt-LightItalic, Georgia;
}
#featured-top-container img{
margin: -3px 0 0 25px;
color: #eee;
position: absolute;
top: 38px;
left: 10px;
display: block;
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
-o-transform: rotate(15deg);
}
#featured-top-container > p{
margin: 0 0 0 25px;
float: left;
}
#featured-top-content{
width: 475px;
margin: 35px 0 0 195px;
float: left;
}
/* Form Styles */
#featured-top form{
width: 260px;
height: 90px;
float: left;
display: inline-block;
clear: both;
margin: -5px 0 0 25px;
/*position: absolute;
top: 130px;
left: 100px;*/
}
#featured-top form table{
width: 99%;
height: auto;
margin: 0;
border-collapse: collapse;
border-spacing: 0;
}
#featured-top form tr{
width: 99%;
height: 35px;
}
#featured-top form input[type=text]{
width: 96%;
height: 20px;
line-height: 20px;
padding: 2px 2%;
font: 14px 'Kontrapunkt-LightItalic', Arial sans-serif;
color: rgb(125,125,125);
float: none;
clear: both;
box-shadow: 3px 3px 0px #bbb;
-moz-box-shadow: 3px 3px 0px #bbb;
-webkit-box-shadow: 3px 3px 0px #bbb;
}
#featured-top form input[type=submit]{
width: 100px;
font: normal 12px Georgia, serif;
color: #AA2222;
letter-spacing: 1px;
float: right;
height: 24px;
line-height: 12px;
padding: 5px 10px;
cursor: pointer;
/*color: #eee;
background-color: #AA2222;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#c43434), to(#AA2222));
background-image: -webkit-linear-gradient(top, #c43434, #AA2222);
background-image: -moz-linear-gradient(top, #c43434, #AA2222);
background-image: -ms-linear-gradient(top, #c43434, #AA2222);
background-image: -o-linear-gradient(top, #c43434, #AA2222);*/
background-color: #888;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddd), to(#888));
background-image: -webkit-linear-gradient(top, #ddd, #888);
background-image: -moz-linear-gradient(top, #ddd, #888);
background-image: -ms-linear-gradient(top, #ddd, #888);
background-image: -o-linear-gradient(top, #ddd, #888);
box-shadow: 0px 1px 0px #fff;
/*border: 1px solid #333;
border-radius: 4px;*/
}
#featured-top form input[type=submit]:hover{
cursor: pointer;
background-color: #aaa;
background-image: none;
}
.transparent-close {
background-color: transparent;
position: absolute;
top: 0px;
left: 0px;
z-index: 800;
width: 100%;
height: 100%;
cursor: pointer;
}
:focus {
outline-style: none;
}
/* Font Styles */
@font-face {
font-family: 'Kontrapunkt-Bold';
src: url('http://artfulideation.com/wp-content/themes/twentyeleven/files/Kontrapunkt-Bold.eot');
src: url('http://artfulideation.com/wp-content/themes/twentyeleven/files/Kontrapunkt-Bold.eot?#iefix') format('embedded-opentype'),
url('http://artfulideation.com/wp-content/themes/twentyeleven/files/Kontrapunkt-Bold.woff') format('woff'),
url('http://artfulideation.com/wp-content/themes/twentyeleven/files/Kontrapunkt-Bold.ttf') format('truetype'),
url('http://artfulideation.com/wp-content/themes/twentyeleven/files/Kontrapunkt-Bold.svg#Kontrapunkt-Bold') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Kontrapunkt-LightItalic';
src: url('http://artfulideation.com/wp-content/themes/twentyeleven/files/Kontrapunkt-LightItalic.eot');
src: url('http://artfulideation.com/wp-content/themes/twentyeleven/files/Kontrapunkt-LightItalic.eot?#iefix') format('embedded-opentype'),
url('http://artfulideation.com/wp-content/themes/twentyeleven/files/Kontrapunkt-LightItalic.woff') format('woff'),
url('http://artfulideation.com/wp-content/themes/twentyeleven/files/Kontrapunkt-LightItalic.ttf') format('truetype'),
url('http://artfulideation.com/wp-content/themes/twentyeleven/files/Kontrapunkt-LightItalic.svg#Kontrapunkt-LightItalic') format('svg');
font-weight: light;
font-style: normal;
}
@font-face {
font-family: 'Kontrapunkt-Light';
src: url('http://artfulideation.com/wp-content/themes/twentyeleven/files/Kontrapunkt-Light.eot');
src: url('http://artfulideation.com/wp-content/themes/twentyeleven/files/Kontrapunkt-Light.eot?#iefix') format('embedded-opentype'),
url('http://artfulideation.com/wp-content/themes/twentyeleven/files/Kontrapunkt-Light.woff') format('woff'),
url('http://artfulideation.com/wp-content/themes/twentyeleven/files/Kontrapunkt-Light.ttf') format('truetype'),
url('http://artfulideation.com/wp-content/themes/twentyeleven/files/Kontrapunkt-Light.svg#Kontrapunkt-Light') format('svg');
font-weight: normal;
font-style: normal;
}