Question

请参阅下面的代码..

 <div style="overflow:auto;width:250px;height:75px;border:1px solid #336699;padding-left:5px">
<label style="{width:250px;}"><input type="checkbox" name="wow[]" onclick='highlight_div(this);'> PHP</label><br>
<label style="{width:250px;}"><input type="checkbox" name="wow[]" onclick='highlight_div(this);'> LINUX</label><br>
<label style="{width:250px;}"><input type="checkbox" name="wow[]" onclick='highlight_div(this);'> APACHE</label><br>
<label style="{width:250px;}"><input type="checkbox" name="wow[]" onclick='highlight_div(this);'> MYSQL</label><br>
<label style="{width:250px;}"><input type="checkbox" name="wow[]" onclick='highlight_div(this);'> POSTGRESQL</label><br>
<label style="{width:250px;}"><input type="checkbox" name="wow[]" onclick='highlight_div(this);'>SQLITE</label><br> </div>

<script>
function highlight_div(checkbox_node)
{
    label_node = checkbox_node.parentNode;


    if (checkbox_node.checked)
    {
        label_node.style.backgroundColor='#0a246a';
        label_node.style.color='#fff';
    }
    else
    {
        label_node.style.backgroundColor='#fff';
        label_node.style.color='#000';
    }
}
</script>

它是显示条目的列表框，用户可以在其中选择多个条目。当他点击一个条目时，所选条目的整个行的蓝色高亮显示... 这个突出显示仅适用于IE，而不是IN MOZILLA ...在Mozilla中，它的部分内容很高。为此解决了解决方法...

请帮忙非常感谢....

Answer 1

<div style="overflow:auto;width:250px;height:75px;border:1px solid #336699;padding-left:5px"><label style="{width:250px;}"><input type="checkbox" name="wow[]" onclick='highlight_div(this);'> PHP</label><br><label style="{width:250px;}"><input type="checkbox" name="wow[]" onclick='highlight_div(this);'> LINUX</label><br></div> <script>function highlight_div(checkbox_node){  label_node = checkbox_node.parentNode;   if (checkbox_node.checked){label_node.style.backgroundColor='#0a246a'; label_node.style.color='#fff';} else    {label_node.style.backgroundColor='#fff';label_node.style.color='#000'; }}</script>

Answer 2

差别似乎是，在firefox <label>中是一个内联元素，而在它中它是一个块元素（块元素基本上是100％宽度，后面有换行符。）

所以解决方法是通过css使标签阻止级别元素：

label {
    display: block;
}

并删除<br>，因为您不再需要它们check here。

Answer 3

为什么在样式内容上设置花括号？ - <label style="{width:250px;}">？您应该使用<label style="width:250px;">

浏览器兼容问题

3 个答案: