Javascript OnClick转换和内容属性在ie7和ie8中不起作用

我在ie7和ie8中的onclick转换中遇到了一个问题。它在firefox、chrome和MicrosoftEdge中运行良好，但在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> &nbsp;&nbsp;&nbsp;<input type='checkbox' id='CB1'/><label for='CB1' class="symbol">&nbsp;Configuration</label>
  <ul>
  <li> &nbsp;&nbsp;&nbsp;<input type='checkbox' id='CB2'/><label for='CB2' class="symbol">&nbsp;IP Configuration</label>
  <ul>
  <li> &nbsp;&nbsp;&nbsp;<input type='checkbox'  id='CB3'/><label for='CB3' class="symbol">&nbsp;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> &nbsp;&nbsp;&nbsp;<input type='checkbox'  id='CB4'/><label for='CB4' class="symbol">&nbsp;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> &nbsp;&nbsp;&nbsp;<input type='checkbox'  id='CB5'/><label for='CB5' class="symbol">&nbsp;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> &nbsp;&nbsp;&nbsp;<input type='checkbox'  id='CB6'/><label for='CB6' class="symbol">&nbsp;Dial Up</label>
  <ul>
  <li><a href='javascript:openInFrame("DialUpParams.html")'>Dial Up Params</a></li>
  <li> &nbsp;&nbsp;&nbsp;<input type='checkbox'  id='CB7'/><label for='CB7' class="symbol">&nbsp;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> &nbsp;&nbsp;&nbsp;<input type='checkbox'  id='CB8'/><label for='CB8' class="symbol">&nbsp;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> &nbsp;&nbsp;&nbsp;<input type='checkbox'  id='CB9'/><label for='CB9' class="symbol">&nbsp;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> &nbsp;&nbsp;&nbsp;<input type='checkbox'  id='CB10'/><label for='CB10' class="symbol">&nbsp;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> &nbsp;&nbsp;&nbsp;<input type='checkbox'  id='CB11'/><label for='CB11' class="symbol">&nbsp;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> &nbsp;&nbsp;&nbsp;<input type='checkbox'  id='CB12'/><label for='CB12' class="symbol">&nbsp;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> &nbsp;&nbsp;&nbsp;<input type='checkbox'  id='CB13'/><label for='CB13' class="symbol">&nbsp;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> &nbsp;&nbsp;&nbsp;<input type='checkbox'  id='CB14'/><label for='CB14' class="symbol">&nbsp;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> &nbsp;&nbsp;&nbsp;<input type='checkbox'  id='CB15'/><label for='CB15' class="symbol">&nbsp;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> &nbsp;&nbsp;&nbsp;<input type='checkbox'  id='CB16'/><label for='CB16' class="symbol">&nbsp;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> &nbsp;&nbsp;&nbsp;<input type='checkbox'  id='CB17'/><label for='CB17' class="symbol">&nbsp;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>

配置

IP配置

地址配置






纳特








IPSecVPN








拨号


拨号脚本










短信







日志






外部网络





SNMP





DTU







系统控制








诊断学





地位





日志状态









陷阱

对于图标，您可以使用类似于和的东西来进行js转换，也许这是不可能的，因为IE不支持CSS转换