2010-09-03 216 views
0

见下面代码..浏览器兼容性问题

<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> 

则列表框显示条目,用户可以选择多个entries..when他点击一个条目,在Selected获取以蓝色为整行反白标明...项 这个高亮只能在IE浏览器,在Mozilla ......在Mozilla中,其被部分白标明.. WATS此

帮助,请 感谢aadvance的解决办法...... 。

+0

请修复格式,因为您的某些标记未显示,因为它们未放在代码块中。 – aularon 2010-09-03 09:54:34

+0

它只采取我的代码的第一行...我如何把这里的整个代码 – soorajthomas 2010-09-03 09:57:17

+0

选择它的全部,然后单击代码按钮 – aularon 2010-09-03 09:59:32

回答

0

不同似乎是,在Firefox中<label>是一个内联元素,而在它是一个块元素(块元素基本上100%宽度和后续换行)。

所以解决方法是,使标签通过CSS块级元素:

label { 
    display: block; 
} 

,摆脱<br> S,因为你不需要他们了,check here

+0

伟大的工作.... – soorajthomas 2010-09-03 10:11:46

0
<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> 
+0

不要把答案,编辑你的问题,并用这些数据修复它。 – aularon 2010-09-03 10:03:06

+0

由于您更新了问题,请删除此答案(因为这不是一个真正的答案)。另外:我把下面的答案,看看:) – aularon 2010-09-03 10:10:57

0

为什么你要在风格内容上设置卷曲的布料? - <label style="{width:250px;}">? 您应该使用<label style="width:250px;">