不同浏览器CSS样式不兼容问题
一句话，我想的太复杂了。向朋友请教才了解到，其实只要加个判断即可，首先获取到浏览器的基本信息，像什么版本啊，名称啊、默认语言啊等等，然后根据不同浏览器默认加载不同CSS样式即可，获取浏览器版本的连接如下：
获取浏览器版本信息的具体方法：https://www.cnblogs.com/muscleape/p/6897356.html
第二个感觉很全的连接：https://blog.csdn.net/mazhili1991/article/details/53421779
以下是我复制粘贴过来的源码，仅做保存而已，省的自己看的时候还得跳转。
<!DOCTYPE html> <html lang="zh-CN"> <head> <title>JS判断各种浏览器，根据判断动态引入不同的CSS文件、JS文件</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="css/base.css" /> </head> <body> <div id="scroll-bar" class="scroll-bar"></div> <script type="text/javascript"> function getBrowser() { var ua = window.navigator.userAgent; var isIE = window.ActiveXObject != undefined && ua.indexOf("MSIE") != -1; var isFirefox = ua.indexOf("Firefox") != -1; var isOpera = window.opr != undefined; var isChrome = ua.indexOf("Chrome") && window.chrome; var isSafari = ua.indexOf("Safari") != -1 && ua.indexOf("Version") != -1; if (isIE) { return "IE"; } else if (isFirefox) { return "Firefox"; } else if (isOpera) { return "Opera"; } else if (isChrome) { return "Chrome"; } else if (isSafari) { return "Safari"; } else { return "Unkown"; } } var linkNode = document.createElement("link"),scriptNode = document.createElement("script"); linkNode.setAttribute("rel","stylesheet"); linkNode.setAttribute("type","text/css"); scriptNode.setAttribute("type", "text/javascript"); if(getBrowser()=="IE"){ linkNode.setAttribute("href","css/index-ie.css"); scriptNode.setAttribute("src", "js/index-ie.js"); }else if(getBrowser()=="Firefox"){ linkNode.setAttribute("href","css/index-firefox.css"); scriptNode.setAttribute("src", "js/index-firefox.js"); }else if(getBrowser()=="Opera"){ linkNode.setAttribute("href","css/index-opera.css"); scriptNode.setAttribute("src", "js/index-opera.js"); }else if(getBrowser()=="Chrome"){ linkNode.setAttribute("href","css/index-chrome.css"); scriptNode.setAttribute("src", "js/index-chrome.js"); }else if(getBrowser()=="Safari"){ linkNode.setAttribute("href","css/index-safari.css"); scriptNode.setAttribute("src", "js/index-safari.js"); } document.head.appendChild(linkNode); document.head.appendChild(scriptNode); document.getElementById("scroll-bar").innerHTML = "您的浏览器是："+getBrowser(); </script> </body> </html>
获取浏览器信息名称信息
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <base> <meta charset="utf-8"> <title>JS获取浏览器类型和版本信息</title> <script> function bro() { var is360 = false; var isIE = false; var isFirefox = false; var isChrome = false; var isEdge = false; var broName = 'Runing'; var str = ''; var strStart = 0; var strStop = 0; var arr = new Array(); var temp = ''; var userAgent = window.navigator.userAgent; //包含以下属性中所有或一部分的字符串：appCodeName,appName,appVersion,language,platform /*alert(userAgent);*/ //FireFox if (userAgent.indexOf('Firefox') != -1) { isFireFox = true; /*broName = 'FireFox浏览器';*/ strStart = userAgent.indexOf('Firefox'); temp = userAgent.substring(strStart); broName = temp.replace('/', '版本号') } //Edge if (userAgent.indexOf('Edge') != -1) { isEdge = true; /*broName = 'Edge浏览器';*/ strStart = userAgent.indexOf('Edge'); temp = userAgent.substring(strStart); broName = temp.replace('/', '版本号'); } //IE浏览器 if (userAgent.indexOf('NET') != -1 && userAgent.indexOf("rv") != -1) { isIE = true; /*broName = 'IE浏览器'; */ strStart = userAgent.indexOf('rv'); strStop = userAgent.indexOf(')'); temp = userAgent.substring(strStart, strStop); broName = temp.replace('rv', 'IE').replace(':', '版本号'); } //360极速模式可以区分360安全浏览器和360极速浏览器 if (userAgent.indexOf('WOW') != -1 && userAgent.indexOf("NET") < 0 && userAgent.indexOf("Firefox") < 0) { if(navigator.javaEnabled()){ is360 = true; broName = '360安全浏览器-极速模式'; }else{ is360 = true; broName = '360极速浏览器-极速模式'; } } //360兼容 if (userAgent.indexOf('WOW') != -1 && userAgent.indexOf("NET") != -1 && userAgent.indexOf("MSIE") != -1 && userAgent.indexOf("rv") < 0) { is360 = true; broName = '360兼容模式'; } //Chrome浏览器 if (userAgent.indexOf('WOW') < 0 && userAgent.indexOf("Edge") < 0) { isChrome = true; /*broName = 'Chrome浏览器';*/ strStart = userAgent.indexOf('Chrome'); strStop = userAgent.indexOf(' Safari'); temp = userAgent.substring(strStart, strStop); broName = temp.replace('/', '版本号'); } document.getElementById('broType').value = broName; } </script> </head> <body onload="bro();"> <input type="text" id="broType" name="broType" style="width: 200px;"> <h4>JavaScript获取浏览器版本信息</h4> </body> </html>
获取浏览器详细信息的源码，有需要的也可以看看
<!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> <title> New Document </title> <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no"> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta charset="utf-8" /> <meta name="Description" content=""> <script id=clientEventHandlersJS language=javascript> /******************************************下为浏览器信息************************************************/ //获取浏览器相关信息 function allinfo() { var appName = navigator.appName; //浏览器的正式名称 var appVersion = navigator.appVersion; //浏览器的版本号 var cookieEnabled = navigator.cookieEnabled; // 返回用户浏览器是否启用了cookie var cpuClass = navigator.cpuClass; //返回用户计算机的cpu的型号，通常intel芯片返回"x86"（火狐没有） var mimeType = navigator.mimeTypes; // 浏览器支持的所有MIME类型的数组 var platform = navigator.platform; // 浏览器正在运行的操作系统平台，包括Win16(windows3.x) // Win32(windows98,Me,NT,2000,xp),Mac68K(Macintosh 680x0) // 和ＭacPPC(Macintosh PowerPC) var plugins = navigator.plugins; // 安装在浏览器上的所有插件的数组 var userLanguage = navigator.userLanguage; // 用户在自己的操作系统上设置的语言（火狐没有） var userAgent = navigator.userAgent; //包含以下属性中所有或一部分的字符串：appCodeName,appName,appVersion,language,platform var systemLanguage = navigator.systemLanguage; // 用户操作系统支持的默认语言（火狐没有） //director var appCodeName = navigator.appCodeName; //与浏览器相关的内部代码名 var appMinorVersion = navigator.appMinorVersion; //辅版本号（通常应用于浏览器的补丁或服务包) var language = navigator.language; //浏览器支持的语言 （IE没有） var onLine = navigator.onLine; //返回浏览器是否处于在线模式（IE4以上版本） var opsProfile = navigator.opsProfile; // 未定义 （IE、火狐没有） var oscpu = navigator.oscpu; //浏览器正在运行的操作系统，其中可能有CPU的信息（IE没有） var product = navigator.product; // 浏览器的产品名（IE没有） var productSub = navigator.productSub; //关于浏览器更多信息（IE没有） var securityPolicy = navigator.securityPolicy; // 浏览器支持的加密类型（IE没有） var userProfile = navigator.userProfile; // 返回一个UserProfile对象，它存储用户的个人信息（火狐没有） var vender = navigator.vender; // 浏览器厂商名称（IE、火狐没有） var vendorSub = navigator.vendorSub; // 关于浏览器厂商更多的信息 var webkitPersistentStorage = navigator.webkitPersistentStorage; var info = "<table border=1>"; var type = ""; if (isIe()) { type = "IE浏览器"; } else if (isFireFox()) { type = "火狐浏览器"; } info += "<tr><td>IE特有属性：</td><td>" + navigator.msManipulationViewsEnabled + "</td></tr>"; info += "<tr><td>浏览器类型：</td><td>" + type + "</td></tr>"; info += "<tr><td>weizhi ：</td><td>" + webkitPersistentStorage + "</td></tr>"; info += "<tr><td>浏览器属性信息：</td><td>" + userAgent + "</td></tr>"; info += "<tr><td>浏览器的正式名称：</td><td>" + appName + "</td></tr>"; info += "<tr><td>浏览器的版本号：</td><td>" + appVersion + "</td></tr>"; info += "<tr><td>浏览器相关的内部代码名：</td><td>" + appCodeName + "</td></tr>"; info += "<tr><td>浏览器相关的辅代码号：</td><td>" + appMinorVersion + "</td></tr>"; info += "<tr><td>浏览器支持的语言IE没有）：</td><td>" + language + "</td></tr>"; info += "<tr><td>浏览器是否处于在线模式：</td><td>" + onLine + "</td></tr>"; info += "<tr><td>浏览器的产品名（IE没有）：</td><td>" + product + "</td></tr>"; info += "<tr><td>浏览器更多信息：</td><td>" + productSub + "</td></tr>"; info += "<tr><td>浏览器厂商名称：</td><td>" + vender + "</td></tr>"; info += "<tr><td>浏览器厂商更多信息：</td><td>" + vendorSub + "</td></tr>"; info += "<tr><td>浏览器的是否启用了cookie：</td><td>" + cookieEnabled + "</td></tr>"; info += "<tr><td>cpu等级：</td><td>" + cpuClass + "</td></tr>"; info += "<tr><td>浏览器的MIME类型：</td><td>" + mimeType.length + "</td></tr>"; info += "<tr><td>系统平台：</td><td>" + platform + "</td></tr>"; info += "<tr><td>安装的插件：</td><td>" + plugins + "</td></tr>"; info += "<tr><td>插件的数量：</td><td>" + plugins.length + "</td></tr>"; info += "<tr><td>插件的名称：</td><td>" + getPluginName() + "</td></tr>"; info += "<tr><td>用户设置的操作系统语言：</td><td>" + userLanguage + "</td></tr>"; info += "<tr><td>操作系统支持的默认语言：</td><td>" + systemLanguage + "</td></tr>"; info += "<tr><td>Director：</td><td>" + checkePlugs("Director") + "</td></tr>"; info += "<tr><td>javaEnabled：</td><td>" + navigator.javaEnabled() + "</td></tr>"; info += "<tr><td>是否有quickTime：</td><td>" + checkePlugs("QuickTime") + "</td></tr>"; info += "<tr><td>flash插件情况：</td><td>" + checkePlugs('Shockwave Flash') + "</td></tr>"; info += "<tr><td>是否有MediaPlayer：</td><td>" + checkePlugs("MediaPlayer") + "</td></tr>"; info += "<tr><td>是否有realPlayer:</td><td>" + checkePlugs("RealPlayer") + "</td></tr>"; info += "<tr><td>屏幕分辨率高度：</td><td>" + window.screen.height + "</td></tr>"; info += "<tr><td>屏幕分辨率宽度：</td><td>" + window.screen.width + "</td></tr>"; info += "<tr><td>颜色质量：</td><td>" + window.screen.colorDepth + "位</td></tr>"; info += "<tr><td>像素：</td><td>" + window.screen.deviceXDPI + "像素/英寸</td></tr>"; info += "<tr><td>字体是否平滑：</td><td>" + window.screen.fontSmoothingEnabled + "</td></tr>"; //info += "<tr><td>规定浏览器是否启用数据污点：</td><td>" + navigator.taintEnabled() + "</td></tr>"; info += "</table>"; document.getElementById("elInfo").innerHTML = info; return info; } //获取插件所有的名称 function getPluginName() { var info = ""; var plugins = navigator.plugins; if (plugins.length > 0) { for (i = 0; i < navigator.plugins.length; i++) { info += navigator.plugins[i].name + ";"; } } return info; } //检查是否安装了某插件，如果安装了返回版本号 function checkePlugs(pluginname) { var f = "-" var plugins = navigator.plugins; if (plugins.length > 0) { for (i = 0; i < navigator.plugins.length; i++) { if (navigator.plugins[i].name.indexOf(pluginname) >= 0) { f = navigator.plugins[i].description.split(pluginname)[1]; return f; break; } } } return false; } //判断是否IE function isIe() { var i = navigator.userAgent.toLowerCase().indexOf("msie"); return i >= 0; } //判断是否firefox function isFireFox() { var i = navigator.userAgent.toLowerCase().indexOf("firefox"); return i >= 0; } /******************************************以上为浏览器信息，以下为pc信息************************************************/ var locator = new ActiveXObject("WbemScripting.SWbemLocator"); var service = locator.ConnectServer("."); function cpuInfo() { //CPU 信息 var properties = service.ExecQuery("SELECT * FROM Win32_Processor"); var e = new Enumerator(properties); var info = "<table border=1>"; info += "<tr bgcolor='#CDEDED' style='font-weight: bold;' ><td width='450' >CPU 信息</td></tr>"; for (; !e.atEnd(); e.moveNext()) { var p = e.item(); info += "<tr style='color: red'><td >CPU序列号:" + p.ProcessorID + "</td></tr>"; info += "<tr><td >" + p.Caption + "</td></tr>"; info += "<tr><td >CPU编号：" + p.DeviceID + "</td></tr>"; info += "<tr><td >CPU型号：" + p.Name + "</td></tr>"; info += "<tr><td >CPU状态：" + p.CpuStatus + "</td></tr>"; info += "<tr><td >CPU可用性：" + p.Availability + "</td></tr>"; info += "<tr><td >CUP Level：" + p.Level + "</td></tr>"; info += "<tr><td >主机名称：" + p.SystemName + "</td></tr>"; info += "<tr><td >Processor Type：" + p.ProcessorType + "</td></tr>"; } info += "</table>"; return info; } function softDisk() { //软盘信息 var properties = service.ExecQuery("SELECT * FROM Win32_FloppyDrive"); var e = new Enumerator(properties); var info = "<table border=1>"; info += "<tr bgcolor='#CDEDED' style='font-weight: bold;' ><td width='450'>软盘信息</td></tr>"; for (; !e.atEnd(); e.moveNext()) { var p = e.item(); info += "<tr><td >" + p.Description + "</td></tr>"; info += "<tr><td >" + p.DeviceID + "</td></tr>"; info += "<tr><td >" + p.Status + "</td></tr>"; info += "<tr><td >" + p.Manufacuturer + "</td></tr>"; } info += "</table>"; return info; } function RomInfo() { //CD-ROM 信息 var properties = service.ExecQuery("SELECT * FROM Win32_CDROMDrive"); var e = new Enumerator(properties); var info = "<table border=1>"; info += "<tr bgcolor='#CDEDED' style='font-weight: bold;'><td width='450' >CD-ROM 信息 </td></tr>"; for (; !e.atEnd(); e.moveNext()) { var p = e.item(); info += "<tr><td >驱动器名称：" + p.Caption + "</td></tr>"; info += "<tr><td >描述：" + p.Description + "</td></tr>"; info += "<tr><td >盘符：" + p.Drive + "</td></tr>"; info += "<tr><td >驱动器状态：" + p.Status + "</td></tr>"; info += "<tr><td >是否在使用：" + p.MediaLoaded + "</td></tr>"; } info += "</table>"; return info; } function keyBoardInfo() { //键盘信息 var properties = service.ExecQuery("SELECT * FROM Win32_Keyboard"); var e = new Enumerator(properties); var info = "<table border=1>"; info += "<tr bgcolor='#CDEDED' style='font-weight: bold;'><td width='450'>键盘信息 </td></tr>"; for (; !e.atEnd(); e.moveNext()) { var p = e.item(); info += "<tr><td >键盘描述：" + p.Description + "</td></tr>"; info += "<tr><td >键盘名称：" + p.Name + "</td></tr>"; info += "<tr><td >键盘状态：" + p.Status + "</td></tr>"; } info += "</table>"; return info; } function mainBoard() { //主板信息 var properties = service.ExecQuery("SELECT * FROM Win32_BaseBoard"); var e = new Enumerator(properties); var info = "<table border=1>"; info += "<tr bgcolor='#CDEDED' style='font-weight: bold;'><td width='450'>主板信息 </td></tr>"; for (; !e.atEnd(); e.moveNext()) { var p = e.item(); info += "<tr style='color: red'><td >主板ID：" + p.SerialNumber + "</td></tr>"; info += "<tr><td >" + p.HostingBoard + "</td></tr>"; info += "<tr><td >制造商：" + p.Manufacturer + "</td></tr>"; info += "<tr><td >是否开启：" + p.PoweredOn + "</td></tr>"; info += "<tr><td >型号：" + p.Product + "</td></tr>"; info += "<tr><td >版本：" + p.Version + "</td></tr>"; } info += "</table>"; return info; } function disk() { //硬盘序列号 信息 var properties = service.ExecQuery("SELECT * FROM Win32_DiskDrive"); var e = new Enumerator(properties); var info = "<table border=1>"; info += "<tr bgcolor='#CDEDED' style='font-weight: bold;' ><td width='450'>硬盘信息 </td></tr>"; for (; !e.atEnd(); e.moveNext()) { var p = e.item(); info += "<tr style='color: red'><td >硬盘序列号：" + p.signature + "</td></tr>"; } info += "</table>"; return info; } //获取Ram信息 function raminfo() { var system = new Enumerator(service.ExecQuery("SELECT * FROM Win32_ComputerSystem")).item(); var physicMenCap = Math.ceil(system.TotalPhysicalMemory / 1024 / 1024); //内存信息 var memory = new Enumerator(service.ExecQuery("SELECT * FROM Win32_PhysicalMemory")); for (var mem = [], i = 0; !memory.atEnd(); memory.moveNext()) { mem[i++] = { cap: memory.item().Capacity / 1024 / 1024, speed: memory.item().Speed }; } var info = "<table border=1>"; info += "<tr bgcolor='#CDEDED' style='font-weight: bold;' ><td width='450'>内存信息 </td></tr>"; info += "<tr style='color: red'><td >内存总量：" + (mem[0].cap + mem[1].cap) + "M</td></tr>"; info += "<tr style='color: red'><td >可用物理内存：" + physicMenCap + "M</td></tr>"; info += "</table>"; return info; } //获取网络连接信息 function ipinfo() { var properties = service.ExecQuery("SELECT * FROM Win32_NetworkAdapterConfiguration Where IPEnabled=TRUE"); var e = new Enumerator(properties); var info = "<table border=1>"; info += "<tr bgcolor='#CDEDED' style='font-weight: bold;' ><td width='450'>网络连接信息：</td></tr>"; var i = 1; for (; !e.atEnd(); e.moveNext()) { var p = e.item(); info += "<tr style='color: red'><td >MAC地址" + i + "：" + p.MACAddress + "</td></tr>"; info += "<tr style='color: red'><td >IP地址" + i + "：" + p.IPAddress(0) + "</td></tr>"; i++; } info += "</table>"; return info; } function pcInfo() { //所有信息 var info = cpuInfo(); info += disk(); info += raminfo(); info += mainBoard(); info += ipinfo(); info += keyBoardInfo(); info += RomInfo(); info += softDisk(); document.getElementById('elInfo').innerHTML = info; return info; } /******************************************以上为pc信息************************************************/ </script> </head> <body> <INPUT id="Button1" type="button" value="浏览器所有信息" name="Button1" language=javascript onclick="allinfo()"> <INPUT id="Button1" type="button" value="客户端pc信息" name="Button1" language=javascript onclick="pcInfo()"> <div id="elInfo"> </div> </body> </html>
