IE中的自定义选择下拉列表问题

Question

好的，所以我搜索了一下，找不到我的问题的答案。至少没有一个与我的问题完全匹配;所以这里是希望你们没有更好的运气，而且你们其中一个人知道我的问题的答案。

在有人询问之前......是的，我是微软的开发人员，是的，IE是我们的产品，是的，几乎所有开发团队的人都宁愿使用Firefox或Chrome，而不是IE，不......我们无法控制它的运行方式，因为这是Internet Explorer团队的责任。此外，我们不是每个人都让我们成为邪恶的帝国。

话虽这么说，但我会给你一些代码，希望能够尽可能地描绘出最好的画面。

选择下拉列表是一个自定义版本，我通过div标签隐藏了它的默认箭头，并在其背景中包含了我自己的下拉箭头，右侧是一个类右箭头。这些元素通过jQuery动态绑定在一起，这里是jQuery代码......

function loadMarketSelector(options) {
// If the market selector already exists, just make sure it's visible.
if ($('#marketSelectorContainer').show().length) {
    return;
}

var settings = { defaultCsvMarket: "", marketLabel: "", addUrl: "", loadingId: "", panelId: "", csvMarketOptions: [] };
if (options) {
    $.extend(settings, options);
}

var $select = $('<select>', { id: 'csvMarketSelector', name: 'csvMarketSelector' }).addClass('items');

var defaultCsvMarketLowercase = settings.defaultCsvMarket.toLowerCase();

// Populate the market list
$(settings.csvMarketOptions).each(function (index, element) {
    var $option = $('<option>', { title: element.label, text: element.label, dir: element.dir });
    $option.data('marketId', element.market);
    // If the user hasn't selected a market yet, use the best guess for their current language
    if (element.market.toLowerCase() == defaultCsvMarketLowercase) {
        $option.attr('selected', true);
        $option.attr('class', 'selected');
    } else {
        $option.attr('class', 'other');
    }

    $select.append($option);
});

var $marketSelectorContainer = $('<div class="marketCont" id="marketSelectorContainer">').append($('<div class="marketvalue">').append($('<span>', { text: settings.marketLabel })).append($('<div class="marketlist">').append($('<div class="rightarrow hidden">').append($select))));
$('#payment-options-iframehost').before($marketSelectorContainer);

// When the user clicks on a market, refresh the page with the locale set to that market and with the redemption interface already open
$('.marketlist select').bind({
    change: function () {
        // Reload the page with the language set to the selected market and with the "redeem card" menu already open
        var langParam = "lang=" + $(this).find('option:selected').data('marketId');
        window.location.hash = 'redeem';

        if (!window.location.search) {
            window.location.search = langParam;
        }
        else if (window.location.search.search(/lang=/)) {
            window.location.search = window.location.search.replace(/lang=(.+)&?/, langParam);
        }
        else {
            window.location.search += '&' + langParam;
        }
    },
    click: function(e){
        $(this).parents('.rightarrow').toggleClass('downarrow');

        //Once the select box is clicked collect the options right and left offsets.
        var leftPos = $(this).offset().left;
        var rightPos = leftPos + $(this).width();

        //After the select box is clicked, if the mouse moves outside of the left and right positions;
        //deactivate the dropdown box and return the sprite to it's original position.
        $(document).mousemove(function(e){
            if (e.pageX < leftPos-10 || e.pageX > rightPos+10) {
                $('.marketlist select').trigger('blur');
            }
        })
    },
    blur: function () {
        if ($(this).parent().hasClass('downarrow')) {
            $(this).parent().removeClass('downarrow');
        }
    }
});

var mkt = $('.marketlist select option.selected').data('marketId'),
    iframeId = settings.panelId + " iframe";

if (typeof mkt !== "undefined") {
    // If the market passed to the page (via the lang param or the browser language) is CSV supported, load the PCS iframe
    bam.ui.loadIframe(iframeId, appendParameters(settings.redeemCardUrl, { lmkt: mkt, mkt: mkt }), settings.loadingId, true, function () { $('.rightarrow').show();});
}
else {
    // If the market is not supported, hide the description text but don't load PCS (since it won't work). The selector will be blank by default.
    $(iframeId).hide();
}
}

这是适用于每个元素的css ......

.payment-options-page .marketCont {
    height: 40px;
    margin-left: 50px;
    margin-bottom: 2px;
}
.payment-options-page .marketvalue .marketlist {
    overflow: hidden;
    margin-top:4px;
    text-align: left;
    width: 231px;
    border: 1px solid #7c7c7c;
    display: block;
    vertical-align: middle;
    height: 19px;
    padding-left: 10px;
    line-height: 19px;
    cursor: pointer;
    background: #fff;
}

.payment-options-page .marketvalue .marketlist .rightarrow select
{
    height: 19px;
    background: transparent;
    border: 0;
    border-radius: 0;
    width: 253px;
    position: relative;
    cursor: pointer;
    padding-left: 20px;
    left: -20px;
    z-index: 100001;
}
.payment-options-page .marketlist .rightarrow
{
    background: url('/Content/all/imgs/transactions_down_right_arrow.png') no-repeat;
    background-position: -318px -220px;
    height: 19px;
    width: 180px;
    float: left;
    cursor: pointer;
    padding-left: 10px;
}

.payment-options-page .marketvalue .downarrow {
    background: url('/Content/all/imgs/transactions_down_right_arrow.png') no-repeat;
    background-position: -319px -277px;
    height: 19px;
    float: left;
    cursor: pointer;
    margin-right: 9px;
}

.payment-options-page .marketvalue .marketlist .rightarrow,
.payment-options-page .marketvalue .hover .downarrow 
{
    position:relative;
    overflow:hidden;
}

如果我直接点击选择框，语义选择框在所有浏览器中都能正常工作。问题是当我点击IE中的自定义箭头时，它就好像它正在放下列表（即：箭头从右箭头变为向下箭头，选择框高亮显示）（参见IE图像）但是下拉列表框就像隐藏在其他元素后面一样。

其他表单元素位于iframe中，其中国家/地区下拉列表不是。

点击箭头可以在firefox中运行...

适用于Chrome ...

点击IE中的箭头

但点击选择框本身确实有用......

Answer 1

我现在在几个项目中遇到同样的问题但找不到答案，所以我决定让IE浏览器使用默认的下拉箭头。如果您已经有一个仅IE样式表（如果没有阅读本文关于条件样式的最佳实践 - http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/），那么您可以只在那里定位箭头，并告诉它不要显示：

.payment-options-page .marketlist .rightarrow {display: none;}

结果可能看起来不太完美，但它至少可以正常运行。从我可以告诉其他浏览器忽略重叠元素，无论出于何种原因，IE注册此元素并且不允许点击工作，并且不能通过抵消任一元素的'z-index'来修复。 修改的 多一点搜索，我找到了原因。 IE不支持pointer-events: none - 这是你需要应用于箭头的css属性，让浏览器知道它应该被忽略。有关详细信息，请参阅此答案：https://stackoverflow.com/a/17441921/2539808

我仍然在寻找这个问题的解决方案，如果我找到一个可以正常运行但仍然按照我们想要的方式运行的话，我一定会告诉你的。）