Итак, я немного искал и не могу найти ответ на свой вопрос. По крайней мере, не тот, который точно соответствует моей проблеме; так вот, чтобы надеяться, что вам, ребятам, не повезло больше, и что один из вас знает ответ на мою проблему.Выборочные проблемы с выбранным выбором в IE
Прежде, чем кто-нибудь спросит ... Да, я разработчик с Microsoft, да, IE - наш продукт, да, ПОЧТИ, все, кто в моей команде разработчиков предпочитают использовать Firefox или Chrome, а не IE, и нет ... мы не контролируем, как это работает, потому что это ответственность команды 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, где ниспадающий список страны отсутствует.
При нажатии на стрелки работает в светлячок на ...
Работает в Chrome ...
Щелкнув по стрелке в IE не
но при нажатии на поле выбора сама по себе делает работу ...
