内联div提供浏览器兼容性问题
我正在构建一个具有以下功能的自定义搜索栏：
- 数据的实时类型过滤（数据当前是硬编码的）
- 通过下拉列表向上/向下箭头
- 带有过滤器更改的固定宽度搜索框（ID /创建者/描述/等）
- 搜索按钮onclick事件以提取搜索框数据
它应该是这样的：
这就是它在IE中的样子：
火狐：
铬：
它位于sandbox of my server，所以你可以查看那里的代码。不过这是HTML / CSS。我试图通过向左浮动来“假装”内联，但我得到了一些奇怪的行为。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Solr Search Prototype</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="scripts.js"></script>
<link href='style.css' rel='stylesheet' type='text/css' />
</head>
<body>
<div id='container'>
<div class='inline' id='refine'>Creator<div class="arrow-down"></div></div>
<input class='inline' id='search' type='text' size='30' />
<div class='inline' id='submit'>Search</div>
<div id='refineDropdown'><ul id='refineList'></ul></div>
<div id='dropdown'><ul id='list'></ul></div>
<ul id='hidden'></ul>
<br class="clearBoth" />
</div>
</body>
</html>
body {
margin:50px;
font-family:Arial, sans-serif;
font-size:13px;
}
div.inline { float:left; }
.clearBoth { clear:both; }
#refine {
margin-right:-3px;
overflow:hidden;
white-space:nowrap;
background: rgb(238,238,238); /* Old browsers */
background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
border-top-left-radius:4px;
border-bottom-left-radius:4px;
border:1px solid #AAA;
height:12px;
padding:6px 6px 6px 6px;
text-align:center;
font-size:11px;
font-family:Helvetica, sans-serif;
color:#666;
text-shadow:0px 1px 0px #e8eae5;
}
#refine:hover {
background: rgb(238,238,238); /* Old browsers */
background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(221,221,221,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(221,221,221,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#dddddd',GradientType=0 ); /* IE6-9 */
cursor:pointer;
}
#submit {
margin-right:-1px;
overflow:hidden;
white-space:nowrap;
background: rgb(238,238,238); /* Old browsers */
background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
border-top-right-radius:4px;
border-bottom-right-radius:4px;
border:1px solid #AAA;
height:12px;
padding:6px 6px 6px 6px;
text-align:center;
font-size:11px;
font-family:Helvetica, sans-serif;
color:#666;
text-shadow:0px 1px 0px #e8eae5;
}
#submit:hover {
background: rgb(238,238,238); /* Old browsers */
background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(221,221,221,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(221,221,221,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#dddddd',GradientType=0 ); /* IE6-9 */
cursor:pointer;
}
.refineClicked {
background:white !important;
border-bottom-left-radius:0px !important;
border-bottom:none !important;
}
.arrow-down {
margin:0 0 1px 7px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #666;
}
#search {
margin-right:-5px;
padding:4px;
border:1px solid #AAA;
color:#444;
}
#search:focus { outline:none }
#refineDropdown {
position:relative;
margin-top:-3px;
padding:3px;
width:150px;
max-height:200px;
background:#fff;
border-left:1px solid #AAA;
border-right:1px solid #AAA;
border-bottom:1px solid #AAA;
word-wrap:normal;
overflow:auto;
}
#hidden { display:none }
#dropdown {
margin-top:-1px;
margin-left:50px;
padding:3px;
width:213px;
max-height:200px;
background:#fff;
border-left:1px solid #CCC;
border-right:1px solid #CCC;
border-bottom:1px solid #CCC;
word-wrap:normal;
overflow:auto;
}
ul {
list-type:none;
margin:0;
padding:0;
}
li {
padding:5px 10px 5px 10px;
}
li:hover {
margin:-1px;
background:#E5F3FF;
border:1px solid #3366FF;
cursor:pointer;
}
.selected {
margin:-1px;
background: #E5F3FF;
border:1px solid #3366FF;
}
1 个答案:
答案 0 :(得分：1)
尝试在您的测试服务器上运行良好。我稍微更改了html标记。
<强> HTML
<div id='container'>
<div class='inline' id='refine'>Long test blah
<div class="arrow-down"></div>
</div>
<input class='inline' id='search' type='text' size='30' />
<div class='inline' id='submit'>Search</div>
<div class="hidden" id='refineDropdown'>
<ul id='refineList'></ul>
</div>
<div class="hidden" id='dropdown'>
<ul id='list'></ul>
</div>
<ul class='hidden'></ul>
<br class="clearBoth" />
我希望它符合你的需要。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？