1. The first thing you need to know is the compatibility problem
Front-end compatibility issues are divided into three categories:
- Browser compatibility issues
- IE6, 7, and 8 do not support HTML5, CSS3, SVG standards, and can be judged as "extremely difficult to be compatible"
IE9 does not support Flex, Web Socket, WebGL, and can be judged as "harder to be compatible"
IE10 partially supports Flex (-ms- flexbox), Web Socket, can be judged as "easier compatible"
IE11 partially supports Flex, WebGL, can be judged as "easier compatible"
IE6, 7, 8, 9 can be regarded as "old browser"
IE10, 11 are available Regarded as "quasi-modern browsers"
Chrome, Firefox, Safari, Opera, Edge can be regarded as "modern browsers" - Screen resolution compatibility issues
- In different screen resolutions, the browser page display varies greatly. Especially when the screen resolution is small, layout disorder is prone to occur. In order to solve this problem, a responsive UI framework came into being
- Cross-platform compatibility issues
- With the increasing development of the mobile and tablet markets, the compatibility of the Web on desktop, tablet, and mobile platforms has become increasingly prominent. Since mobile and tablet are touch-based operations, they are very different from desktop mouse operations, so corresponding modifications must be made on different platforms. In order to solve this problem, a cross-platform framework was born. On different platforms, the appearance, layout, and operation have been modified differently.
Two, standing compatibility issues
1. The default outer margins and inner margins of different browsers are different
. Symptoms : Write a few labels at random, without style control, the margins and paddings of each are quite different.
Solution : {margin:0;padding:0;} in css.
Note : This is the most common and easiest browser compatibility problem. Almost all css files will use wildcards to set the inside and outside of each label at the beginning The distance is 0.
2. The picture has a default spacing
symptom : When several img tags are put together, some browsers will have the default spacing, and the wildcard mentioned in the first question will not work.
Solution : Use the float attribute to layout the img.
Note : Because the img tag is an inline attribute tag, as long as it does not exceed the container width, the img tag will be arranged in a row, but there will be a space between the img tags of some browsers. It is the right way to remove this gap and use float.
3. Use after pseudo element removal method (also known as universal clear method)
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
4. Display ellipsis beyond
select {
-o-text-overflow:ellipsis;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
width:200px;
}
5. The hover style does not appear after the link is visited
a:link {
}
a:visited {
}
a:hover {
}
a:active {
}
Welcome to join the group for technical discussions, group number: 954314851
