我在ie7和ie8 中遇到 onclick转换问题。它在firefox，chrome和Microsft Edge中运行良好，但在ie7和ie8中没有。
我开始知道css3属性在ie7 / ie8中不起作用。我可以在ie7 / 8中使用JavaScript进行onclick过渡吗？
请任何人可以帮助我，还有一个问题是我使用CSS内容属性来显示菜单中的+/-符号，但它在ie7和ie8中也不起作用。
请有人帮助我。
CSS
*{padding:0px;margin:1px;margin-top:-0.01em;margin-left:-0.05em;margin-right:0.1em;border-radius:8px;}
body{font:16px/1 Times;background-color:#FAFCFD;}
nav.vertical{position:absolute;background:#5798B4;}
nav.vertical ul{list-style: none;}
nav.vertical ul ul{position:relative;}
nav.vertical li{position:relative;color:#FFF;font-weight:bold;text-decoration:none;}
nav.vertical a{display:block;color:#FFF;font-weight:bold;text-decoration:none;padding:3px 12px;}
nav.vertical li:hover > a{background:#FAFCFD;font-weight:bold;color:#000;transition:2.5s}
nav.vertical ul ul{background:rgba(0,0,0,0.01);padding-left:20px;overflow:hidden;}
input:checked~ul{
max-height:1000px;
Transition:max-height:1s ease-in;
-webkit-transition: max-height:1s ease-in;
-moz-transition: max-height:1s ease-in;
-o-transition: max-height:1s ease-in;
padding:3px 12px;
}
input~ul{
max-height:0;
padding:2px 12px;
transition: max-height 1s ease-out;
-webkit-transition: max-height:1s ease-out;
-moz-transition: max-height:1s ease-out;
-o-transition: max-height:1s ease-out;
}
input+.symbol::before{content:"\002b";font-weight: bold;}
input:checked+.symbol::before{content:"\002d";font-weight: bold;}
input[type="checkbox"] {
display:none;
}
HTML
<nav class="vertical">
<ul>
<li> <input type='checkbox' id='CB1'/><label for='CB1' class="symbol"> Configuration</label>
<ul>
<li> <input type='checkbox' id='CB2'/><label for='CB2' class="symbol"> IP Configuration</label>
<ul>
<li> <input type='checkbox' id='CB3'/><label for='CB3' class="symbol"> Address Config</label>
<ul>
<li><a href='javascript:openInFrame("LIPConfig.html")'>LAN IP</a></li>
<li><a href='javascript:openInFrame("WIPConfig.html")'>WAN IP</a></li>
<li><a href='javascript:openInFrame("L2TPIPConfig.html")'>L2TP IP</a> </li>
</ul>
</li>
<li> <input type='checkbox' id='CB4'/><label for='CB4' class="symbol"> NAT</label>
<ul>
<li><a href='javascript:openInFrame("NATConfig.html")'>NAT</a></li>
<li><a href='javascript:openInFrame("IPv4v6SMap.html")'>IPv4v6 Static Mapping</a></li>
<li><a href='javascript:openInFrame("PortFwd.html")'>Port Forwarding</a></li>
</ul>
</li>
<li><a href='javascript:openInFrame("WiZRTUPort.html")'>WiZ/RTU Port Mapping</a></li>
<li><a href='javascript:openInFrame("Management_config.html")'>Management Config</a> </li>
<li> <input type='checkbox' id='CB5'/><label for='CB5' class="symbol"> IPSec VPN</label>
<ul>
<li><a href='javascript:openInFrame("IPSecConfig.html")'>IPSec Configuration</a></li>
<li><a href='javascript:openInFrame("IPSecTunnelConfig.html")'>Tunnel Configuration</a></li>
</ul>
</li>
<li><a href='javascript:openInFrame("L2TPVPNConfig.html")'>L2TP VPN</a> </li>
</ul>
</li>
<li> <input type='checkbox' id='CB6'/><label for='CB6' class="symbol"> Dial Up</label>
<ul>
<li><a href='javascript:openInFrame("DialUpParams.html")'>Dial Up Params</a></li>
<li> <input type='checkbox' id='CB7'/><label for='CB7' class="symbol"> Dial Up Scripts</label>
<ul>
<li><a href='javascript:openInFrame("ModemInit.html")'>Modem Init Commands</a></li>
<li><a href='javascript:openInFrame("DialOut.html")'>Dial Out Commands</a></li>
<li><a href='javascript:openInFrame("HangUp.html")'>Hang Up Commands</a></li>
<li><a href='javascript:openInFrame("SMSCmd.html")'>SMS Commands</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='javascript:openInFrame("PPPConfig.html")'>PPP</a></li>
<li> <input type='checkbox' id='CB8'/><label for='CB8' class="symbol"> SMS</label>
<ul>
<li><a href='javascript:openInFrame("SMSConf.html")'>SMS</a></li>
<li><a href='javascript:openInFrame("SrcMobile.html")'>Source Mobile Number</a></li>
<li><a href='javascript:openInFrame("SMSAlarmParams.html")'>SMS Alarm Parameter</a></li>
</ul>
</li>
<li><a href='javascript:openInFrame("DateTimeConf.html")'>Date & Time</a></li>
<li> <input type='checkbox' id='CB9'/><label for='CB9' class="symbol"> Log</label>
<ul>
<li><a href='javascript:openInFrame("LogParam.html")'>Log Params</a> </li>
<li><a href='javascript:openInFrame("LogEvent.html")'>Log Event</a></li>
<li><a href='javascript:openInFrame("LogUpload.html")'>Log Upload</a></li>
</ul>
</li>
<li> <input type='checkbox' id='CB10'/><label for='CB10' class="symbol"> External Network</label>
<ul>
<li><a href='javascript:openInFrame("ExtrnNWConf.html")'>Ext. N/W Connection</a></li>
<li><a href='javascript:openInFrame("TgtIPConfig.html")'>Target IP</a> </li>
</ul>
</li>
<li> <input type='checkbox' id='CB11'/><label for='CB11' class="symbol"> SNMP</label>
<ul>
<li><a href='javascript:openInFrame("SysConfig.html")'>System</a></li>
<li><a href='javascript:openInFrame("TrapConfig.html")'>Trap</a></li>
</ul>
</li>
<li> <input type='checkbox' id='CB12'/><label for='CB12' class="symbol"> DTU</label>
<ul>
<li><a href='javascript:openInFrame("DTUApp.html")'>DTU Application</a></li>
<li><a href='javascript:openInFrame("RS232Config.html")'>RS232</a></li>
</ul>
</li>
</ul>
</li>
<li> <input type='checkbox' id='CB13'/><label for='CB13' class="symbol"> System Control</label>
<ul>
<li><a href='javascript:openInFrame("Save.html")'>Save</a></li>
<li><a href='javascript:openInFrame("Reboot.html")'>Reboot</a></li>
<li><a href='javascript:openInFrame("DefaultConf.html")'>Factory Defaults</a></li>
<li><a href='javascript:openInFrame("UserAccount.html")'>Change Password</a></li>
<li><a href='javascript:openInFrame("SysMtn.html")'>System Maintenance</a></li>
</ul>
</li>
<li> <input type='checkbox' id='CB14'/><label for='CB14' class="symbol"> Diagnostics</label>
<ul>
<li><a href='javascript:openInFrame("Ping.html")'>Ping</a></li>
<li><a href='javascript:openInFrame("TRoute.html")'>Trace Route</a> </li>
</ul>
</li>
<li> <input type='checkbox' id='CB15'/><label for='CB15' class="symbol"> Status</label>
<ul>
<li><a href='javascript:openInFrame("SysStatus.html")'>System</a></li>
<li><a href='javascript:openInFrame("WANStatus.html")'>WAN</a></li>
<li><a href='javascript:openInFrame("LANStatus.html")'>LAN</a></li>
<li><a href='javascript:openInFrame("PPPStatus.html")'>PPP</a></li>
<li> <input type='checkbox' id='CB16'/><label for='CB16' class="symbol"> Log Status</label>
<ul>
<li><a href='javascript:openInFrame("ShwAllLogs.html")'>Show All Logs</a></li>
<li><a href='javascript:openInFrame("ShwLogsEdt.html")'>Show Logs From</a></li>
</ul>
<li><a href='javascript:openInFrame("CellInfo.html")'>Cell Info.</a></li>
<li><a href='javascript:openInFrame("VPNStatus.html")'>VPN Status</a> </li>
</li>
</ul>
</li>
<li> <input type='checkbox' id='CB17'/><label for='CB17' class="symbol"> Traps</label>
<ul>
<li><a href='javascript:openInFrame("GTraps.html")'>Generic</a></li>
</ul>
</li>
<li><a href='javascript:openInFrame("QuickConfig.html")'>Quick Config</a></li>
<li><a href='javascript:openInFrame("Logout.html")'>Exit</a></li>
</ul>
</nav>