HTML5 front-end tutorial css compatibility

Image for post
Image for post
  1. What is compatibility?

The same HTML+CSS+JS, but the external features displayed still cannot be unified, and there are flaws. With the same code, some browsers display “normal” and some display “abnormal”. Just like going to food stalls, some people have nothing to do after eating, while some people will have diarrhea.

2. Why does the browser have compatibility issues?

The core architectures used by different manufacturers are different and the codes are difficult to overlap, and the implementation methods are also different. Therefore, the styles presented on the page will also have some differences, which may seem to be different.

3. Ideas for handling compatibility issues:

1): Do you want to do it? (Look at the degree of influence of the product, the audience, is it the main effect or the basic function)

2): To what extent? (If you want those browsers to support, just make those browsers compatible)

3): How to do it? (According to compatibility issues, choose those frameworks and those compatible tools.)

4.Progressive enhancement and graceful degradation

1): Progressive enhancement: The basic functions and pages are now carried out for the lower version browsers, and the effects, interaction, and user experience are improved for the higher version browsers.

2): Graceful degradation: At the beginning, a complete page display (effect, interaction, function, user experience) is performed for the higher version browser, and then the lower version browser is compatible

5.Common compatibility issues

High collapse

The parent element of the floating element is adaptive (when the parent element does not write the height, after the child element writes the float), the height of the parent element will collapse


1): Add a declaration to the parent element: overflow: hidden;

2): Add an empty div below the floating element. And declare to the element, clera: both; height: 0; overflow: hidden;

Minimum height adaptation (because min-heigh itself is an incompatible css attribute, so all browsers are not compatible)

1): min-height: value; -height: value

2): min-height: value; heigth: auto! Important; height: value

The button element size is different

1): Uniform size for buttons

2): Set a label outside, remove the input border and background in the label and button style

Pictures have spacing by default (when several img tags are put together, some browsers will have default spacing)

1); add float attribute to img

There will be a gap under the ie6 picture

1): Set display for the picture; block;

Transparency below ie8

filler: alpha (value range 0–100) For example: filter: alpha (opacity=60)

The default line height of an empty div (an empty div will be used when clearing the float, which is no problem in most browsers, in ie6 there will be a default line height even if the div is empty)

1) Set its height to 0, and set overflow: hidden.

6. Some compatibility-related tools and libraries

1) html5shiv: Used to solve the problem that browsers below IE9 do not recognize the new HTML5 tags and cause CSS to not work.

2) Respond.js: is a fast and lightweight polyfill used to provide min-width and max-width features of media queries for IE6–8 and other browsers that do not support CSS3 Media Queries, to achieve responsive web design

3) CSS Reset: Reset the browser’s css default properties; if the browser is different, the interpretation of the default style is different, and the display can be consistent with reset.

4) normalize.css: is a customizable CSS file, which allows different browsers to render web page elements in a more uniform form.

5) Modernizr.js: Traditional browsers will not be completely replaced at present, making it difficult for you to embed the latest CSS3 or HTML5 features into your website. Modernizr was born to solve this problem. It can also simulate functions that are not supported by older browsers by loading custom scripts.

Written by

Digital Nomad

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store