IE9在打印时出现多个选择溢出

我在打印多个选择时忽略了选择边框，IE9出现问题。IE9在打印时出现多个选择溢出

下面是如何重现问题：

打开IE9在Windows 7
前往W3Schools的的multiple select edit page。
现在突出显示选项并复制/粘贴，直到出现一长串重复项。
然后删除尺寸属性。
单击“编辑并单击我”，以便重新加载页面，并且您现在可以在第二个面板中选择已修改的选择。
现在，打印文档（甚至使用XPS查看器）。

对我来说，所有的选项都打印在页面上，即使select只有4个选项元素高。如果您将“size”属性保留为默认值2，这种情况仍然会在某种程度上发生，但在更改或删除它时更加明显。

是否有其他人遇到过这种情况？这是一个IE错误？有谁知道解决方法？

来源

2011-06-01 spizzat2

没有太大的帮助，但我运行到这一点。我试过指定高度和“溢出：隐藏”无济于事...... – 2011-09-01 17:23:42

我很想看到这个答案 - 现在有同样的问题。 – 2012-07-30 19:00:21

似乎有不为这方面的任何CSS的解决方案。相反，我编写了一个小型jQuery脚本，将<select multiple>内容复制到<div>中，以便可以打印它。然后，我应用了一些CSS，使其看起来像一个选择，并且只在实际打印时显示副本。

脚本：

//jQuery required 
$(function() { 
    if(!$.browser.msie) return false; 
    $('select[multiple]').each(function() { 
    $lPrintableDiv = $('<div data-for="' + this.id + '" />').addClass($(this).attr('class')).addClass('printable'); 

    //update printable on changes 
    $(this).after($lPrintableDiv).change(function($aEvent){ 
     updatePrintable($aEvent.target); 
    }); 

    //run once on load 
    updatePrintable(this); 
    }); 
}); 

function updatePrintable($aTarget) { 
    var $lSelect = $($aTarget); 
    var $lSelected = $($aTarget).val(); 
    var $lPrintable = $('[data-for="'+$aTarget.id+'"]'); 

    $($lPrintable).width($lSelect.width()).height($lSelect.height()); 
    $($lPrintable).html(''); 

    $($aTarget).children().each(function($lElm){ 
    $lVal = $(this).val(); 
    $lLabel = $('<label />').text($lVal); 
    $lOption = $('<input type="checkbox" />').val($lVal); 

    if($(this).is(':selected')) 
    $lOption.prop('checked', true); 

    $lPrintable.append($lOption).append($lLabel); 
    }); 
}

CSS：

.printable { 
    border: 1px solid grey; 
    display: none; 
    overflow: auto; 
} 

    .printable label { 
     display: block; 
     font: .8em sans-serif; 
     overflow: hidden; 
     white-space: nowrap; 
    } 

    .printable [type="checkbox"] { 
     display: none; 
    } 

    .printable [type="checkbox"]:checked + label { 
     background: #3399ff; 
     color: white; 
    } 

@media print { 
    select[multiple] { display: none; } 
    .printable { display: inline-block; } 
    .printable [type="checkbox"]:checked + label { background: grey; } 
}

另见jsFiddle和original post有关此修复程序

来源

2012-10-25 11:01:25

我想说这是一个非常好的解决方法，但如果IE可以一起行动，我会喜欢它。 – spizzat2 2012-10-26 18:55:18

您可以通过在IE9兼容模式下查看网站来解决此问题。通常，IE会确定它无法正确显示站点，并允许您从地址栏中打开兼容模式的选项，但有时您需要明确设置它。

如何打开兼容模式 - http://www.sevenforums.com/tutorials/1196-internet-explorer-compatibility-view-turn-off.html - 我用的方法中的第一个2

来源

2011-09-01 17:43:01

IE9在打印时出现多个选择溢出

回答

相关问题