表单输入在Google Chrome中打破布局

Question

这是一个难以解释的问题。我一直盯着它好几个小时。电子邮件输入会破坏您在字段中输入文本的布局。以下是工作示例的链接：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;
}

Answer 1

关闭您的td标记，例如</td> instead of <td> = Wrong