网站元素的位置

Question

我在为IE，Chrome和Opera渲染我的网站时遇到了问题。在Firefox中，定位效果很好：

而在其他浏览器中它看起来像垃圾：

我尝试了几种定位和填充选项，但没有运气。当我用jQuery替换下来替换下拉菜单以便以图形方式增强它时出现问题。原始下拉列表仍然存在，但使用css-option“display：none”。我会感谢你的暗示！

这是css：

这是一个大蓝框

.searchHomeForm a, .searchHomeForm a:hover {
    color:#000000;
}

三个元素周围的隐形框

div.searchHomeForm , .searchform {
    height: 37px;
    margin-left: auto;
    margin-right: auto;
}

白色搜索栏

.search_bar {
    position: inherit;
    height: 25px;
    letter-spacing: 0.02em;
    line-height: 25px;
    padding: 9px 0 0px 9px;
    width: 390px;
    border: 1px solid #95B6D6;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.11) inset;
    border-radius: 0.25em 0 0 0.25em;
}

jQuery Dropdown替换

#searchformReplacement {
    background: #EBEBEB;
    padding: 0px 1px 5px 0;
    margin-bottom: 3px;
    border-top: 1px solid #95B6D6;
    border-bottom: 1px solid #95B6D6;
    width: 109px;
    position: inherit;
}

查找按钮

.find_button {
    background: url("../images/lupevufindsearchsubmit1.png") no-repeat scroll #bBbBbB;
    -moz-border-radius: 0.25em;
    border-radius: 0 0.25em 0.25em 0;
    position: inherit;
    height: 36px;
    line-height: 36px;
    margin: 0px 0 3px -1px;
    padding: 4px 10px 4px 10px;
    width: 60px;
    border-top: 1px solid #95B6D6;
    border-right: 1px solid #95B6D6;
    border-bottom: 1px solid #95B6D6;
    border-left: none;
    box-shadow: 2px 2px 5px rgba(76, 133, 187, 0.50) inset;
    transition: all 0.2s ease-in-out 0s;
}

Answer 1

可能会在彼此相邻的三个元素上使用float: left;吗？

Answer 2

尝试从position: inherit移除.search_bar {}，#searchformReplacement {}和.find_button {}添加display:inline-block每个

或为每个添加display:inline和float:left。如果您使用float:left

，则可能需要清除浮点数

Answer 3

我给你一个小例子来获得所需的位置，我正在使用内联块的适当性（我喜欢它）：

<强> HTML

<div id="container">
    <input type="text" class="inline-block" />
    <div class="inline-block">
        Your custom select
    </div>
    <button type="submit" class="inline-block">Search</button>
</div>

<强> CSS

.inline-block {
    display:inline-block;
    *display:inline; /*IE hack*/
    *zoom:1; /*IE hack*/
}

#container {
    background:lightBlue;
    width:300px;
    margin:0 auto;
    text-align:center;
}

查看工作fiddle！

Answer 4

是的，正如madhushankarox指出的那样，清理你的花车非常重要。但是你并不总是需要使用花车，特别是在你的情况下。如果您需要将表单放入液体布局页面，此外还有额外的奖励。它应该在大多数宽或薄的屏幕上均匀分配。

CSS

/*the blue rounded box*/
#bluebox {
padding:3% 5%;
margin:0 25%;
background:#d0dcea;
border:solid 1px #b7c2d2;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

.fieldset-search {
text-align:center;
}

/*The white search bar*/
.input-search {
padding:5px;
margin:0;
width:50%;
vertical-align: baseline;
border: solid 1px #b7c2d2;
background: #fff;
outline: 0;
}

/*the jQuery Dropdown replacement*/
.list-search {
padding:4px;
margin:0 0 0 -5px;
}

/*the find button*/
.submit-search {
padding:4px 10px;
margin:0 0 0 -5px;
}

HTML 的

<div id="bluebox">
  <div class="fieldset-search">
  <input type="text" name="search" class="input-search">
  <select name="list" class="list-search"><option></option></select> 
  <button type="search" class="submit-search">Go</button>
  </div>
</div>