你能发现这个HTML显示错误吗？

我一直在关注HTML和CSS上的一本教程。我试着做一个普通的标题设计，如YouTube的，但我似乎无法得到搜索框和按钮以正确显示。按钮被呈现比搜索框低约10px，就好像它有顶部填充集。你能发现这个HTML显示错误吗？

在这里可以看到http://www.wourm.com/index.html 任何人都可以看到它为什么会发生？

[编辑：添加的HTML和CSS这个页]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<title>Awtunes.com</title> 
<link href="awtunes.css" rel="stylesheet" type="text/css" /> 
</head> 

<body> 
    <div class="container"> 
     <div class="header"> 
      <div class="logo floatL"><img src="images/logo.png" alt="Awtunes.com logo"/></div> 
    <div id="find-videos" class="search floatL" style="top:0px;" > 
        <form id="searchVideos" name="searchVideos" method="get" action="/"> 
    <input name="q" type="text" class="searchBox" id="searchBox" /><input type="submit" class="searchbutton" value="" /> 

</form> 
      </div> 
       <div class="menu floatL"> 
        <ul> 
         <li>Videos</li> 
         <li>Music Videos</li> 
         <li>Trailers</li> 
         <li>Create Account</li> 
         <li>Sign in</li> 
        </ul> 
       </div> 
     </div> 

    </div> 
</body> 

</html>

和CSS

.awtunes { 
     font-family: "Courier New", Courier, monospace; 
    } 
    .container { 
     width: 980px; 
     top: 0px; 
     margin-left: auto ; 
     margin-right: auto ; 
    } 
    .floatL { 
     float: left; 
     position:relative; 
    } 
    .floatR { 
     float: right; 
     position:relative; 
    } 
    .searchBox { 
     border-style:none; 
     border-width:0px; 
     width: 360px; 
     background-image: url(images/search_bar.png); 
     background-repeat:no-repeat; 
     height: 40px; 
     font-size: 18px; 
    } 
    .searchbutton { 
     border-style:none; 
     border-width: 0px; 
      background-repeat:no-repeat; 
     background-image: url(images/search_button.png); 
     background-repeat: no-repeat; 
     width: 55px; 
     height: 40px; 

    } 
    .logo { 
     width: 122px; 
     height: 50px; 
    } 
    .menu { 
     width:430px; 
    } 
    .search { 
     width: 425px; 
     height: 40px; 
    } 
    .split { 
     background-image: url(images/split.jpg); 
     background-color: #C0C0C0; 
     background-repeat: no-repeat; 
     width: 1px; 
     height: 18px; 
    } 
    ul 
    { 
    list-style-type: none; 
    padding: 0px; 
    margin: 0px; 
    } 
    li 
    { 
    background-image: url(images/split.jpg); 
    background-repeat: no-repeat; 
    float: left; 
    margin: 0 0.15em; 
    }

来源

2010-11-12 zcourts

如果这段代码来自一本书，你最好买一个新的..严重。让按钮对齐，只需将你的floatL类添加到你的两个输入字段。

来源

2010-11-12 23:13:05 tobiasmay

谢谢，添加floatL来对它进行排序 – zcourts 2010-11-12 23:26:22

.searchbutton {垂直对齐：顶部; }

来源

2010-11-12 23:08:49 babtek

我建议CSS重置，例如YUI CSS重置。在IE和FF中的粗略检查显示了一些非常严重的不一致。如果您使用CSS重置样式表，这至少会将您的代码设置在浏览器之间的平台上。 YUI CSS重置：http://developer.yahoo.com/yui/reset/

一旦你有这样的资源就位，许多布局的怪癖已经处理。

来源

2010-11-12 23:10:57

采纳了您的建议并添加了重置功能，看到已经产生的效果 – zcourts 2010-11-12 23:27:02

当浏览器开始像来自同一个行星一样行动时，它会改变您的游戏，尤其是某些被诅咒的IE版本。六。 – 2010-11-12 23:35:37

它似乎是因为.searchBox {font-size：18px; }。如果您从input.searchBox中取出所有其他样式，则可以看到更改字体大小会更改普通的旧文本输入的大小，这将更改文本输入和按钮的容器的高度。

我也认为这是一个好主意，将您的HTML和CSS添加到这个问题，以便如果有人在将来看到这个问题，并且您的网站是不同的，他们仍然可以从您的问题中学习！

来源

2010-11-12 23:13:11 carols10cents

快速解决当前的代码将添加类似：

.searchbutton { 
    position: relative; 
    top: -15px; 
}

来源

2010-11-12 23:25:53 garrettwinder

carolclarinet就在这里 - 字体大小属性是（至少在Firefox）的问题。我不确定你是否使用IE开发工具来检查你的CSS问题，但我建议使用它和FireBug for FireFox一样。他们会让你在没有繁琐的修改/保存/刷新周期的情况下随意玩耍。

来源

2010-11-12 23:26:01 jwiscarson

你能发现这个HTML显示错误吗？

回答

相关问题