1. Background origin browser compatibility
Browser compatibility issues or compatibility is also known as web site compatibility issues, refer to page on various browsers display may produce inconsistent compatibility problems between the browser and Web pages. Simply means that the major browser manufacturers have their own set of standards, non-standard browser launched their statement to proprietary features market segmentation. However, different browsers that also do the same kernel, so each browser parses the web page there is a certain discrepancy, which is the leading cause of browser compatibility problems, this is what we always say browser compatibility issues.
Browser Wars
The browser wars, refers to the share of market competition between different web browsers. Used to refer to the following two sets of competition: the first group of the 20th century is Microsoft Internet Explorer, Netscape Navigator Netscape replaces dominance. The second group was InternetExplorer share of other browsers eroded after 2003, including Mozilla Firefox, Google Chrome, Safari and Opera.
2. What is the CSS hack
Hack, as the name suggests is a modified meaning, due to the different versions from different vendors Browser or some browsers (such as IE6-IE11, Firefox / Safari / Opera / Chrome, etc.), support for CSS, parsing is not the same, resulting in different browser environment presents a page to show inconsistent results. At this time, we have to get uniform results page, you need to write different versions for different or browser-specific CSS styles, we write this procedure corresponding CSS code for different browsers / versions, called CSS hack!
The principle hack
Because different browsers and browser versions of CSS support and analytical results are not the same, and CSS priority to demonstrate the impact of the effect on the browser, which allows us to scenarios for different browsers apply different CSS.
The drawback hack
Although consistency is good for use hack page performance, but too much abuse can cause confusion html document, increase the burden on management and maintenance, but would be wasted.
Under what circumstances the use of hack
Under normal circumstances, we try to avoid using CSS hack, but in some cases in order to take into account the user experience backward compatibility, the use of last resort hack. For example because IE8 and below do not support CSS3, and our project page uses a lot of new CSS3 properties render properly in IE9 / Firefox / Chrome, in which case we would have to use a hack tricks.
3. Common Problems and Solutions
Question 1: dashed box Firefox browser, click on the link that appears;
METHODS: We can give a label set outline properties:
a {outline: none;}
a: Focus {outline: none;}
Question 2: Google browser font minimum 12px, font set when the display is only less than 12px 12px;
method: use the transform property to change the font size
4.CSS style reset
The aforementioned website compatibility issues, refer to page on various browsers display may be inconsistent: there will be differences between the default styles for different browsers, such as the default style with ul indented in IE, it's indentation is achieved through margin, down Firefox, it is indented by padding to achieve. People could not help this situation extended from browser compatibility to the style reset; so this is the face of this problem, the solution is to give some people the outset browser's default style all removed, more accurate said that by redefining the label style. Covering the browser's default CSS properties. The default style provided by the browser overwritten, this is the style reset.
Reset style role: CSS styles CSS style reset so that each browser has a consistent basis, and to achieve this benchmark the most important way is to clear all these styles.
Reset lack of style
1.不当地破坏了所有浏览器的基本样式，例如使用*{margin:0;padding:0},去掉ol,ul的列表样式，使得一些语义元素缺乏恰当的样式表现。
2.粗暴的reset使得一些交互控件外观在浏览器下失调，例如去掉了outline，使得交互控件缺乏视觉反馈。
3.增加浏览器样式计算成本，有一定的性能负担，因为平白无故的增加了CSS文件的大小，增加了很多的渲染。
各大浏览器使用的内核
IE浏览器:使用trident内核；
Firefox浏览器：使用gecko内核；
safari浏览器：使用webkit内核；
opera浏览器：以前是presto内核，现在改用google chrome的Blink内核；
Chrome浏览器：使用Blink内核（基于webkit，google与opera software共同开发）
更多技术资讯可关注：gzitcast