3

コンテンツ (PHP の動的コンテンツ) に応じて展開する選択ボックスがあります。ただし、サブミット ボタンの位置は IE7 では固定されたままです。

IE7 の位置の問題

zoom:1 を追加して、選択ボックスと送信ボタンの両方に position:relative を適用しようとしましたが、役に立ちませんでした。

Firebug では、css オプションの選択を解除して再選択すると、正しく再配置されます。誰かが修正のアイデアを持っていますか?

HTML -

<div class="filter">
            <form name="input" action="#" method="post" title="Submit">
                <span class="purple">Filter photography by:</span>


                <select id="search_type" name="brand_filter">
                    <option value="0">No filter</option>
                    <option value="1" <?= ($this->session->userdata('selected_brand_filter') == 1) ? 'selected="selected"' : ''?>>Brand</option>
                    <option value="2" <?= ($this->session->userdata('selected_brand_filter') == 2) ? 'selected="selected"' : ''?>>Hotel/Location</option>
                    <option value="3" <?= ($this->session->userdata('selected_brand_filter') == 3) ? 'selected="selected"' : ''?>>Region</option>
                    <option value="4" <?= ($this->session->userdata('selected_brand_filter') == 4) ? 'selected="selected"' : ''?>>Event</option>
                </select>
                <select id="search_category" name="category_filter">
                    <option value="0">Nothing selected</option>
                    <? if(!empty($category_filter)): ?>
                            <? foreach($category_filter as $catg): ?>
                                    <option value="<?=$catg->id?>" <?= ($this->session->userdata('selected_category_filter') == $catg->id) ? 'selected="selected"' : ''?>><?= $catg->name ?></option>
                            <? endforeach ?>
                    <? endif ?>
                </select>
                <input type="submit" value="" id="filter-submit"/>
            </form>
        </div>

CSS -

#filter-submit{
width:20px;
height:20px;
background: url('../images/filter_submit.jpg') no-repeat;
border:none;
cursor:pointer;
vertical-align:middle;

}

4

2 に答える 2

0

まだ IE7 をサポートしていますか? 私もあなたの痛みを感じています。

最善の方法は、テーブルまたは一連の div タグ内に配置することだと思います。

私が IE で見つけたもう 1 つのことは、周囲の div の幅を設定するなど、親コンテナー内のものを微調整することです。送信ボタンなどで幅を指定すると、すべての親オブジェクトで幅を指定する必要がある場合があります。（私が知っている奇妙な）

あいまいで申し訳ありませんが、私はこれらすべての問題を試行錯誤で解決し、IE が他のブラウザーのように Web 標準に準拠していないことを何度も非難しています。

ただし、コンポーネントを個々の div またはテーブル列に配置すると、間違いなく解決されます。

于 2012-08-17T10:14:30.310 に答える
0

短いタイマーを設定し、CSS プロパティを動的に変更することで、JS/JQuery の回避策を見つけました。きれいではありませんが、他の誰かがより良い提案をしていない限り、うまくいくようです

$(document).ready(function() {        
    $('#search_type').change(function(){
        filtertimer = setTimeout('timeout_trigger()', 100);
    });
});

function timeout_trigger(){
    $('#filter-submit').css({'display':'block'});
    $('#filter-submit').css({'display':'inline'});
    clearTimeout(filtertimer);
}
于 2012-08-17T11:07:11.067 に答える