浏览器兼容性问题
请参阅下面的代码..
<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 中有效，在 MOZILLA 中无效...在 mozilla 中，它会部分突出显示.. 有什么解决方法吗...
请帮忙 提前致谢....
see code below..
<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>
it is listbox showing entries, where user can select multiple entries..when he clicks an entry, the selected gets highlited by blue color for the entire row of the entry...
this highlighting works only in IE , not IN MOZILLA...In mozilla, its gets highlited partially..
wats the workaround for this...
help please
thanks in aadvance....
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
不同之处似乎是，在 firefox 中
是一个内联元素，而在 ie 中它是一个块元素（块元素基本上是 100% 宽度，后面有换行符）。因此解决方法是通过 css: 使标签块级元素
并摆脱
the different seems to be, that in firefox
<label>is an inline element, while in i.e. it's a block element (block elements ar basically 100% width with linebreak after).so the fix is to make labels block level elements via css:
and get rid of
<br>s, since you don't need them anymore, check here.为什么要在样式内容上设置大括号？ -
?您应该使用
Why do you set curly brakets over style content? -
<label style="{width:250px;}">?You should use
<label style="width:250px;">