A common browser compatibility issues
1. Double float bug Description: block after the float element is provided, and a set of lateral margin, margin value is a large value displayed in the setting than IE6
Solution: to float elements to add display: inline; to convert it to inline elements
2. Form Elements line height inconsistencies
solution:
Scheme One: the element added to form vertical-align: middle;
Option II: Form elements are added to the float: left;
3.IE6 does not recognize the height of the container is smaller than 10px
solution:
Scheme One: the element is provided to overflow: hidden;
Option II: to an element disposed font-size: 0;
4. on the hyperlink in the default picture has a border (in some browsers)
solution:
Adding to the picture border: 0; or border: none;
5.IE6 min-height attribute does not recognize
solution:
A program: min-height: 100px; _height: 100px;
Option II: min-height: 100px; height: auto important; height:! 100px;
6. By default there are gaps Pictures
solution:
Option One: img added to the float property (applicable to multiple images in the case of his show)
Option Two: img Add to display: block; (applies to only one picture of the situation)
7. Percentage bug
Description: parent element width of 100%, 50% sub-element width, at IE6 50% 50% 100% greater than the sub-elements will fall to the right of
solution:
The right to clear float floating right clear: right;
8.IE browser does not recognize opacity property
Solution: Write transparency settings for IE browser:
filter: alpha (opacity = value); (range 1-100)
eg: .box{
opacity:.6;
filter:alpha(opacity=60);
}
9. The mouse pointer bug
Description: cursor attribute of hand recognition only IE, other browsers do not recognize
solution:
Use cursor: pointer; IE6 and above browser and other browsers recognition
NOTE: cursor: pointer; the shape of the mouse pointer is set to the hand type
10. Default button sizes
solution:
A program: a tag with an analog button
Option Two: If the button is a picture, the picture as a direct button to insert background picture
11. The vertically overlap margin
Description: When the margin-bottom is provided to the above elements, the following elements to the set margin-top, in which case only the larger of the values identified
solution:
A program: margin-top margin-bottom and only one set of values wherein
Scheme II: The above element to an outside a container package, and set the overflow: hidden;
Two, css hack
1. The concept: for the treatment of different kernel browser compatibility issues arise is called css hack
2. Filter
a) Filter underline attribute syntax: selector {_ properties: Property Value;}
eg: .box{height:150px;_height:100px;}
Note: underline attribute filters only the following versions of IE6 and identify other browsers do not recognize
b)!important关键词过滤器语法: 选择器{属性:属性值!important;}
eg: .box{background:red!important;background:blue;}
注：加!important的css属性优先级最高，但是IE6及以下版本的浏览器不识别
c)*属性过滤器语法： 选择器{*属性:属性值;}
eg: .box{background:blue;*background:pink;}
注：*属性过滤器只有IE6，IE7识别，其他浏览器都不识别
d) \9语法: 选择器{属性:属性值\9;}
注： 只有IE6，7，8识别，其他浏览器都不识别
e) \0语法: 选择器{属性:属性值\0;}
注：IE8及以上浏览器识别，其他浏览器都不识别
三、市场主流五大浏览器内核
1.IE浏览器 内核： Trident(IE内核)
2.Mozilla Fox（火狐） 内核：Gecko
3.Safari(苹果浏览器),Chrome（谷歌浏览器） 内核：Webkit
4.Opera（欧朋） 内核：Presto
5.最新版本的chrome浏览器 内核：Blink
附录：
图片整合技术
一、Css sprites(图片整合技术)
概念：将多张背景图片整合到一张背景图中，通过background-position来实现背景图定位技术称为图片整合。
我们也把图片整合技术叫做精灵图，雪碧图，滑动门技术。
二、图片整合的优势（优点）
1.将多张图片整合到一张图中，减少了对服务器的请求次数，减轻了对服务器的压力，加快了图片的加载速度。
2.同时也减小了图片体积，达到了网站性能的优化。
SEO优化
SEO—搜索引擎优化分为站内优化和站外优化两个方面
站内优化：
1. page title optimization: add a meaningful title in the head section title
2. The head of the page optimization: add keywords and descriptions in the head section
<meta name="keywords" content="" /> 关键词
<meta name="description" content=""/> 描述
3. Hyperlink Optimization
a) adding to a title tag attribute
b) Avoid placing a hyperlink in flash, seo flash unrecognized text
c) Try to avoid using images Hot Links
4. The image optimization
Img tag to add alt and title attributes
5. Add a site map or site navigation
It allows users to find the fastest content to be browsed
6. Add Links to the site
7. dynamic pages than static page is more conducive to search engine optimization
Note: With the continuous improvement of search engines, the search page will be dynamic easier
8. avoid the "bulk" of the page, clear code structure reasonable
Site optimization:
Baidu Promotion
Website traffic analysis
Brand building site
More professional front-end knowledge, make the [2048] ape www.mk2048.com