Project scenario ：

The commonly used browsers on the market are ： Google , new IE,FireFox,QQ, sogou ,Opera,360 etc. . Software development needs to consider the compatibility of various browsers , This is a headache .
Here I especially praise Google and Opera, Compatibility is great .FireFox Compatibility is really poor , new IE Not bad , Basically the same as Google . It is suggested to unify browsers in the future , Lighten the burden on developers

Problem description ：

1. Use content Replace img Picture question （FireFox）
2. Some style deformation problems （FireFox、QQ browser ）
3. FireFox Browser is not available reload() Refresh the page
4. Baidu map cannot be loaded （360 browser 、 Old computer system ）
5. select Scroll bar style of label drop-down box ( Except for Google 、 new IE、Opera, Other browsers have . It is currently in a pending state )
   

Solution ：

1. Question 1 ：FireFox Browser ,img There is no way to pass the picture content To update the replacement , Only replace src Properties are OK . Use content What can be replaced is div label . therefore Recommended for future use img Labels show pictures using src, To switch pictures dynamically , Use JS operation
2. Question two ： Browser page deformation incompatible problem , In especial FireFox, You can set the style separately , Make some small changes , To solve this problem
3. Question 3 ： Together with the last question , The solution is as follows ：

//  Determine whether it is Firefox , Other similar 
var userAgent = navigator.userAgent;
if (userAgent.indexOf('Firefox') > -1) {
    
	  // FireFox Can't use reload Reload , It can be loaded in the following ways 
      window.location.href = window.location.href;
}else{
    
    location.reload();
}

4. Baidu map cannot be loaded , Show the following questions , Be careful ： This problem occurs in win7 System , On the old machine , Use your own computer 360 It's normal , After research, it is found that the reason for the problem is that the old machine in order to improve performance , The default installation is not enabled webGL Support for , The problem that led to this
   
   terms of settlement ：
   Open the browser WebGL The function first requires the browser to support this function , With chrome Browser as an example ：

• Right click chrome Browser shortcuts , Click properties ;
• Click the Shortcut tab , Enter –enable-webgl --ignore-gpu-blacklist --allow-file-access-from-files, Then click OK
• Parameter function introduction ：
  　　--enable-webgl Open for indication WebGL Support ;
  　　-gpu Said to ignore GPU The blacklist , That is to say, there are some graphics cards GPU Because it is too old , It is not recommended to run WebGL, This parameter allows the browser to ignore the blacklist , Forced operation WebGL;
  　　--ignore-gpu-blacklist Indicates that resources are allowed to be loaded locally , If you're not WebGL The developer of the , No need for development debugging WebGL;
  　　 I just want to have a look WebGL Of Demo, Then you can not add this parameter ：
  –allow-file-access-from-files.
  5. Question five ： I don't know how to solve , Most people on the Internet say ::-webkit-scrollbar Pseudo class to modify , But this way is only in Google , new IE,Opera Effective in , except FireFox, Other browsers in div The label is valid , stay select Invalid in , stay QQ This method can be used in browsers to remove the default style . But it doesn't solve the fundamental problem .