CSS的伸缩菜单在IE显示正常，可是firefox就不行了
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS的伸缩菜单在IE显示正常，可是firefox就不行了相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">
function Set(ct)
if (ct.style.display=="none")
var divs=document.getElementsByTagName("div");
for(var i=0;i<divs.length;i++)
divs[i].style.display="none";
ct.style.display="";
else
ct.style.display="none";
</script>
<style type="text/css">
a
display:block;
width:200px;
height:20px;
text-decoration:none;
text-align:center;
margin-top:5px;
border:1px solid #ccc;
color:#fff;
background:#333;
font-weight:bold;
outline:none;
a:visitedcolor:#fff;
a:hover
background:#639;
color:#fff;
#ct1,#ct2,#ct3,#ct4,#ct5
border:1px solid #ccc;
border-top:none;
width:200px;
height:30px;
background:#9FF;
</style>
</head>
<body>
<a href="javascript:Set(ct1);" hidefocus="true">公司介绍</a>
<div id="ct1" style="display:none">公司介绍内容区</div>
<a href="javascript:Set(ct2);" hidefocus="true">产品介绍</a>
<div id="ct2" style="display:none">产品介绍内容区</div>
<a href="javascript:Set(ct3);" hidefocus="true">公司文化</a>
<div id="ct3" style="display:none">公司文化内容区</div>
<a href="javascript:Set(ct4);" hidefocus="true">公司活动</a>
<div id="ct4" style="display:none">公司活动内容区</div>
<a href="javascript:Set(ct5);" hidefocus="true">留言内容</a>
<div id="ct5" style="display:none">留言内容内容区</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">
function Set(ct)
if (document.getElementById(ct).style.display=="none")
alert("s")
var divs=document.getElementsByTagName("div");
for(var i=0;i<divs.length;i++)
divs[i].style.display="none";
document.getElementById(ct).style.display="block";
else
document.getElementById(ct).style.display="none";
</script>
<style type="text/css">
a
display:block;
width:200px;
height:20px;
text-decoration:none;
text-align:center;
margin-top:5px;
border:1px solid #ccc;
color:#fff;
background:#333;
font-weight:bold;
outline:none;
a:visitedcolor:#fff;
a:hover
background:#639;
color:#fff;
#ct1,#ct2,#ct3,#ct4,#ct5
border:1px solid #ccc;
border-top:none;
width:200px;
height:30px;
background:#9FF;
</style>
</head>
<body>
<a href="javascript:Set('ct1');" hidefocus="true">公司介绍</a>
<div id="ct1" style="display:none">公司介绍内容区</div>
<a href="javascript:Set('ct2');" hidefocus="true">产品介绍</a>
<div id="ct2" style="display:none">产品介绍内容区</div>
<a href="javascript:Set('ct3');" hidefocus="true">公司文化</a>
<div id="ct3" style="display:none">公司文化内容区</div>
<a href="javascript:Set('ct4');" hidefocus="true">公司活动</a>
<div id="ct4" style="display:none">公司活动内容区</div>
<a href="javascript:Set('ct5');" hidefocus="true">留言内容</a>
<div id="ct5" style="display:none">留言内容内容区</div>
</body>
</html>
说实话 这么长的代码 还没分
下拉图像在 Chrome 和 IE 中不可见
【中文标题】下拉图像在 Chrome 和 IE 中不可见【英文标题】：Dropdown image not visible in Chrome and IE 【发布时间】：2016-02-07 08:17:00 【问题描述】：我在我的网站中创建了一个下拉菜单，并在其中添加了background image。我在 Firefox 中可以正常查看，但在 Chrome 或 IE 中无法查看。
这里是： my site
在最顶部，您可以看到一个搜索图标。悬停时，您可以看到一个弹出窗口。在里面我使用了一个下拉菜单。
您可以看到图像在 Firefox 中显示正常，但不能使用任何其他浏览器。
:
这是我使用的选择下拉代码：
我的 JS
function goToNewPage(dropdownlist)
var url = dropdownlist.options[dropdownlist.selectedIndex].value;
if (url != "")
window.open(url);
我的 HTML
<form name="dropdown">
<label>I am Looking for</label>
<img src="http://test.techkalph.com/wp-content/uploads/2015/10/Bee-searching1.png">
<select accesskey="E" name="list">
<option selected="">Please select one</option>
<option style="background-image:url(http://test.techkalph.com/wp-content/uploads/2015/10/flowers271.png); background-repeat:no-repeat;" value="http://www.google.com/">Japanese Companies</option>
<option style="background-image:url(http://test.techkalph.com/wp-content/uploads/2015/10/social16.png); background-repeat:no-repeat;" value="http://www.google.com/">Service Provider (Non-Japanese)</option>
</select>
<input type="button" onclick="goToNewPage(document.dropdown.list)" value="Go">
</form>
【问题讨论】：
此处在 Firefox 中不可见 使用 firefox，您可以使用某些属性对选项进行样式化，但在其他浏览器中则不能。 适用于 Firefox - 但我无法选择任何选项。更好的跨浏览器解决方案是使用图像创建您自己的下拉列表。如果你用谷歌搜索，你会找到很多解决方案。 在浏览器中选择选项的样式非常不一致，我建议使用 jQuery 替代方案，例如jQuery Selectmenu 【参考方案1】：抱歉，您遇到了问题。您使用的代码仅适用于 Firefox 和 Webkit 浏览器。您要么必须使用JQuery UI 来满足您的需要，要么您也可以在this 链接中使用一些代码
【讨论】：
【参考方案2】：您无法在 webkit (Google) 浏览器中执行此操作。您将需要使用 ul 和 li 元素的替代解决方案。
http://getbootstrap.com/components/#dropdowns
【讨论】：
以上是关于CSS的伸缩菜单在IE显示正常，可是firefox就不行了的主要内容，如果未能解决你的问题，请参考以下文章
CSS 不适用于 IE 和 Firefox，但适用于 Chrome
Chrome 中 .animate() 的问题（在 Firefox 和 IE 中很好）