【发布时间】：2013-08-17 01:04:14
【问题描述】：
好的，所以我搜索了一下，找不到我的问题的答案。至少没有一个完全符合我的问题；所以在这里希望你们没有更好的运气，并且你们中的一个人知道我的问题的答案。
在任何人问...无法控制其运行方式，因为这是 Internet Explorer 团队的责任。此外，我们并不是每个人都认为的邪恶帝国。
话虽如此，我会给你什么代码，希望能画出最好的画面。
选择下拉菜单是一个自定义版本，我通过一个 div 标签隐藏了它的默认箭头，并在它周围的 div 的背景中包含了我自己的下拉箭头和一个类 rightarrow。这些元素通过 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中点击箭头不会
但单击选择框本身确实有效...
【问题讨论】：
标签： list internet-explorer z-index hidden