css - ブラウザの互換性の問題を与えるインラインdiv

Question

次の機能を備えたカスタム検索バーを作成しています。

データのライブタイプのフィルタリング（データは現在ハードコードされています）
ドロップダウンリストを上/下矢印
フィルタが変更された固定幅の検索ボックス（ID /作成者/説明など）
検索ボタンonclickイベントで、検索ボックスのデータを取得します

次のようになります。

ここに画像の説明を入力してください

IEでは次のようになります。

ここに画像の説明を入力してください

Firefox：

ここに画像の説明を入力してください

クロム：

ここに画像の説明を入力してください

それは私のサーバーのサンドボックスにあるので、そこでコードをチェックすることができます。ただし、これが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;
}

score 1 · Accepted Answer

テストサーバーで試してみましたが、うまくいきました。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" />

</ p>

コード/ライブ例

それがあなたのニーズに合っていることを願っています。

css - ブラウザの互換性の問題を与えるインラインdiv

1 に答える 1

Related

Reference