“This is the 12th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

preface

These days, I looked at some articles I wrote when I just entered the gold mining platform, and the display and visit volume are not very high, so I decided to rewrite some articles in the next period of time, to ensure that the output of articles without hydrology, refuse hydrology from my start.

In order to make your experience better, this article will talk about how to support only Google Browser access to view the page? This article mentions browser compatibility issues as proof that I am not ignorant of browser compatibility issues, but that other factors at the time led me to take a one-size-fits-all approach to requirements (I am a non-stick frying pan 😀).

Hey, dig friends ~ since click in, might as well continue to read ^_^

thinking

concept

The so-called browser compatibility problem refers to the situation that different browsers parse the same code differently, resulting in inconsistent page display.

Browser compatibility problem is also known as web page compatibility or website compatibility problem, refers to the display effect of the web page in a variety of browsers may not be consistent and the browser and web page compatibility problem. In the design and production of the website, do a good job of browser compatibility, can let the website in different browsers under the normal display. For the development and design of browser software, the better compatibility of browser to standards can give users a better use experience.

Cause of occurrence

The root cause of browser compatibility problems is that browsers use different kernels and they approach the same thing differently.

How to understand the above text? That is, different browsers use different kernels and supported HTML and other web language standards, as well as different user client environments (such as different resolutions), resulting in the display effect can not achieve the desired effect.

The solution

Front-end development often needs to check browser compatibility, so Can I Use this query site is recommended. It is a web site customized for front-end developers to query the features and compatibility of CSS, JS, HTML5, SVG in the mainstream browser, which can be very good to ensure the compatibility of web pages in the browser. With this tool we can quickly understand the code in each browser compatible situation, strongly recommend a wave of 👍, we hurry to experience ✈! The interface effect is as follows:

The tool can only show us how compatible the query features are across browsers. How to solve the compatibility problem depends on the following solutions:

CSS Compatibility Problems

1. Different browsers have different internal and external margins by default

Solution:*{margin: 0; padding: 0; }

In fact, every front-end developer uses the same method to clear the default styles in the browser. Here is the resetting style code I chose to clear the default styles:

*/ HTML, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockQuote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { padding:0; margin:0; border:0; outline: 0; font-family: "Helvetica Neue For Number", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; word-wrap:break-word; } html, body { width: 100%; height: 100%; } a{ text-decoration: none; - its - tap - highlight - color: rgba (255255255, 0); } ul,ol{ list-style-type: none; } textarea { resize: none; } /* Input,button,textarea {-webkit-appearance: none; -webkit-tap-highlight-color: rgba(255, 225, 225, 0); padding: 0; border: 0; outline: 0; } // change the placeholder attribute default text color input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { /* WebKit browsers */ color: #999; } input:-moz-placeholder, textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #999; } input::-moz-placeholder, textarea::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #999; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { /* Internet Explorer 10+ */ color: #999; }Copy the code

In addition to defining your own code to clear the default styles, you can also reference a mature plugin written by someone else to clear the default styles.

2. Image with a label will have a border in IE9

Solution:img{border: none; }

3, IE6 and lower floating elements, floating edge double margin

Solution: Nomargin, the use ofpadding

In IE6 and earlier, some block elements have default heights

Solution: Set the elementfont-size: 0;

5, A label blue border

Solution:a{outline: none; }

6. IE6 does not support min-height

{min-height: 200px; _height: 350px; }

No browser below Internet Explorer 9 can use opacity

Solution: Firefox/Chrome/Safari/Opera browser using opacity; Use Filter for Internet Explorer

Opacity: 0.7; /*FF chrome safari opera*/ filter: alpha(opacity:70); /* Use ie filter, compatible with IE */Copy the code

Ie6/7 does not support display:inline-block

Solution:{display: inline-block; *display: inline; }

9. Compatibility problems of CURSOR

Solution: Unified use{cursor: pointer; }

10, In IE6/7, when img tag and text together, line-height failure

Solution: Text and<img>All set upfloat

11, table width fixed, TD automatic line wrap

Solution: Table setting{table-layout: fixed}Td set{word-wrap: break-word}

12. When the margin of adjacent elements is set, the margin will be the maximum value and the small value will be discarded

Instead of overlapping margins, add a parent element to the child element and set the parent element’s Settings:{overflow: hidden}

13. A Label CSS status sequence

Solution: Followlink--visited--hover--activeSequential writing of

14, IE6/7 pictures under the gap problem

Solution:img{display: block; }

15. Ul tags in Firefox have padding values by default, while in IE only margin values

Solution:ul{margin: 0; padding: 0; }

16, IE li specified the height, typesetting error occurred

Solution: Setline-height

17, ul or LI float, display outside the div

Solution: Clear float; Must be added after ul label<div style="clear:both"></div>To close the outer div

18, ul set float, margin will be larger in IE

Solution:ul{display: inline; }.li{list-style-position: outside; }

19. If the content in Li exceeds the length, use ellipsis to display it

li{
    width: 200px;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
}
Copy the code

20. When div nested p, a blank line appears

Solution:li{display: inline; }

21. The default div height in IE6 is the height of a font display

Solution:{line-height: 1px; }or{overflow: hidden; }

22. Fonts cannot be smaller than 10px in Chrome

Solution:p{font-size: 12px; The transform: scale (0.8); }

23. The background color of the input box after remembering your password on Google Chrome is yellow

input{ background-color: transparent ! important; } input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{ -webkit-text-fill-color: #333 ! important; -webkit-box-shadow: 0 0 0 1000px transparent inset ! important; background-color: transparent ! important; background-image: none ! important; transition: background-color 5000s ease-in-out 0s; }Copy the code

24. CSS3 compatible prefix representation

writing	The kernel	The browser
-webkit-	Webkit rendering engine	chrome/safari
-moz-	Gecko rendering engine	Firefox
-ms-	Trident rendering engine	IE
-o-	Opeck rendering engine	Opera

Such as:

  .box{
       height: 40px;
       background-color: red;
       color: #fff;
       -webkit-border-radius: 5px; // chrome/safari
       -moz-border-radius: 5px; // Firefox
       -ms-border-radius: 5px; // IE
       -o-border-radius: 5px; // Opera
       border-radius: 5px;
   }
Copy the code

JS compatibility issues

Compatibility of event objects

e = ev || window.event

2. Compatibility of rolling events

scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

3, prevent bubbling compatibility

  if (e.stopPropagation) {
      e.stopPropagation();
  } else {
      e.cancelBubble=true;
  }
Copy the code

4, prevent default behavior compatibility

  if (e.preventDefault) {
      e.preventDefault();
  } else {
      e.returnValue = false;
  }
Copy the code

5. Add event listener compatibility

  if (target.addEventListener) {
      target.addEventListener("click", fun, false);
  } else {
      target.attachEvent("onclick", fun);
  }
Copy the code

6. Ajax object creation compatibility

Var XHR = null; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject("Microsoft XMLHTTP"); }Copy the code

7, compatible mouse button coding

function mouse (ev) { var e = ev || window.event; if (evt) { return e.button; } else if (window.event) { switch (e.button) { case 1: return 0; case 4: return 1; case 2: return 2; }}}Copy the code

8, in IE, event object has x, Y attributes, Firefox and event. X equivalent is event. PageX, and event

x = event.x ? event.x : event.pageX;

In IE, the Event object has a srcElement property, but no target property. In Firefox, the Event object has a target attribute, but no srcElement attribute

  var source = ev.target || ev.srcElement;
  var target = ev.relatedTarget || ev.toElement;
Copy the code

10, in Firefox need to use CSS to prohibit the selection of web content, in IE with JS prohibit

-moz-user-select: none; // Firefox obj.onselectstart = function() {return false; } // IECopy the code

11. InnerText works fine in IE, but not in FireFox

if (navigator.appName.indexOf("Explorer") > -1) {
    document.getElementById('element').innerText = "IE";
} else {
    document.getElementById('element').textContent = "Firefox";
}
Copy the code

12. In Firefox, you can use the const keyword or the var keyword to define constants. In IE, only the var keyword can be used to define constants

Solution: Unified usevarKeyword to define constants

Mobile compatibility problems

1. Prohibit iOS from recognizing long numbers as phone numbers

Solution:<meta content="telephone=no" name="format-detection" />

2. Prohibit iOS pop-up operation Windows

Solution:-webkit-touch-callout:none

3. Forbid Android phone to recognize email

Solution:<meta content="email=no" name="format-detection" />

4. Disable text selection for iOS and Android users

Solution:-webkit-user-select:none

5. Remove the default uppercase for input on iOS

Solution:<input autocapitalize="off" autocorrect="off" />

6. Cancel the voice input button under Android

Solution:input::-webkit-input-speech-button {display: none}

7. Modify ugly click highlighting on mobile, both iOS and Android

Solution:* {- its - tap - highlight - color: rgba (0,0,0,0); }

8, iOS input for type=button attribute disabled set true, will appear style text and background abnormal problems

Solution: Useopacity=1;

9. Input is fixed position. In iOS, input is fixed at the top or bottom

Solution: The content list box is also fixed positioning, so that there will not be a problem of fixed dislocation

10. Mobile fonts smaller than 12px are used around the border or background blocks, and some Android text is biased

Solution: You can use an overall scale of 1 times (width, height, font size, etc.) and then use a transform scale

11. Uploading pictures on the mobile terminal is compatible with low-end machines

Accept =”image/*” multiple

12, In Android placeholder text setting line height will be on the side

Solution: Do not set the row height in the input placeholder

Overflow: scroll or auto; The problem with swiping Caton on iOS

-webkit-overflow-scrolling: touch;

14, iOS date such as: 2022-02-22 00:00:00 format time to timestamp failed

Solution: Remove ’00:00:00 ‘from time before converting to timestamp

15. In iOS, change the time format to /, for example, 2022/02/22

let date = '2022-02-22'; let dateStr = date.replace(/-/g, '/'); / / 2022/02/22Copy the code

16, mobile terminal click300MS delay response

Solution: Use Fastclick

window.addEventListener( "load", function() { 
    FastClick.attach( document.body ); 
}, false );
Copy the code

17, mobile terminal 1px border problem

Solution: Remove the border from the original element, then redo the border using :before or :after and reduce the scale of the transform by half. The original element is positioned relative to the original element, and the new border is positioned absolutely

.border-1px{ position: relative; border:none; } .border-1px:after{ content: ''; position: absolute; bottom: 0; background: #000; width: 100%; height: 1px; - its - transform: scaleY (0.5); The transform: scaleY (0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; }Copy the code

So far, about the browser compatibility problems related knowledge and solutions on the end of the talk, finally also interwoven about the mobile compatible problem description, there must be a lot of compatibility problems are not summarized, I hope digg friends in the below comment declined to provide.

See the article so far, conveniently click a praise 👍 go again bai, 3Q^_^

Past wonderful articles

• How do I zoom in and out of page elements in a front-end project?
• How to use Antd Table to create Echarts maps in React projects?
• How to introduce and use external fonts in Vue or React projects?
• How to use the Amap plugin and wrap popover components in React projects?
• Data Visualization – How do I use the Echarts plug-in and encapsulate diagram components in React projects?
• How can I change the default DatePicker week selector in Antd?
• How to encapsulate the Vue watermark component and how to use it in React?
• The most powerful rich text editor? TinyMCE Series [3]
• The most powerful rich text editor? TinyMCE Series [2]
• The most powerful rich text editor? TinyMCE Series of articles [1]
• React project to implement a Checkbox style effect component
• 2022 First update: 3 Progress bar effects in front end projects
• Front-end Tech Trends 2022: You don’t come in and see how to earn it a small target?
• If ancient have programmers writing summaries, probably is such | 2021 year-end summary
• Front-end development specifications in front end team practice
• Javascript high-level constructors
• Javascript high-level inheritance
• Recursion and closure

After the language

Guys, if you find this article helpful, click 👍 or ➕. In addition, if there are questions or do not understand the part of this article, you are welcome to comment on the comment section, we discuss together.