IE7 CSS alignment issue_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-19 13:14 出处：网络

The following code is working perfect on firefox and IE8 . But on IE 7 the middle \"search input text field\" is not aligning properly with other two feilds , It is coming down bit ..

The following code is working perfect on firefox and IE8 . But on IE 7 the middle "search input text field" is not aligning properly with other two feilds , It is coming down bit ..

Here is the code and thanks your help

<!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" lang="en" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>CSS IE 7 I开发者_如何学JAVAssue</title>
        <style type="text/css">
        .search{
        background:#000000;
        width:700px;
        border:3px solid #000;

        }
        .inputWrap, .buttonWrap, .selectWrap {float:right; border:0px solid #000;} input[type="text"], input[type="button"],select {height:1.5em; line-height:1.5em; font-size:100%; border-width:0; padding:0;} /* ie7- specific css */ .search .textfield {float:right; display:inline;}
        </style>
    </head>
    <body>
        <div class="search">
            <form id="searchForm" action="#" method="post">
                <div class="buttonWrap"><input type="button" value="Go" /></div>
                <div class="inputWrap"><input type="text" value="Search .." /></div>
                <div class="selectWrap">
                    <select>
                      <option value="Company">Company</option>
                      <option value="Profession">Profession</option>
                      <option value="People">People</option>
                    </select>
                </div>
            </form>
            <br style="clear:both"/>
        </div>
    </body>
</html>

DEMO: http://so.devilmaycode.it/ie7-css-alignment-issue

.search {
  text-align: right;
  background: #000000;
  width: 700px;
  border: 3px solid #000;
}
form {
  vertical-align: middle;
  padding: 5px;
  margin: 0;
}
form div {
  display: inline;
  border: 0;
  margin: 0 5px 0 0;
  padding: 0;
}
input, select {     
  vertical-align: middle;
  margin: 0;
  padding: 0
}

Try setting width explicitly for all elements you want on the same level and their parent.