CSS on browser compatibility problem resolution

This article is to share the content of the CSS on the browser compatibility issues of the resolution, the content is very reference value, hoping to help the need for small partners.

First, Firefox
1. <input type= "date"/> Invalid
hack: Using the jquery ui:datepicker plugin.
(1) Download the plugin and place it in the project folder;
(2) Introduction to the required pages, such as:

<script src= "Jslib/plugins/datepicker/bootstrap-datepicker.js" ></script>

This script and the corresponding JS location required by the page is not in order;
(3) Click Trigger Pick Event, func (pic);
Call $ ("#datepicker"). DatePicker ();
The notation with parameters:

$ ("#datepicker"). DatePicker ({    numberofmonth:3,     //A row of 3    numberofmonth: [3,2],//three rows per row of 2    });

Second, IE8
1. Fillet: Border-radius failure
hack: Use some plug-ins that can make IE compatible with CSS3 new properties, here's pie.htc.
(1) Download pie.htc; http://css3pie.com/
(2) Deployed in your project file, I used to be placed under JS, but, like the official website said
"It doesn ' t matter where exactly, as long as you know where It is." ；
(3) Write style and append compatibility, such as:

A.level0 Span.button {    width:10px;    height:10px;    Background: #999;    border-radius:50%;    -webkit-border-radius:50%;    -moz-border-radius:50%;    Behavior:url (VIEW/JS/PIE.HTC)    ///Note that the Append compatible path is not relative to the current CSS file    //But the corresponding html/jsp file, personally feel that only the description of the official website is not very good. }

2. Gradient: Background-image:linear-gredient () failure
hack1: Use compatible plugins.
Method the previous two steps (1), (2)
(3) Write style and append compatibility, such as:

nav{    background:linear-gradient (#8fb8ff 0, #fff 100%);    background:-webkit-linear-gradient (#8fb8ff 0%, # FFF 100%)    background:-moz-linear-gradient (#8fb8ff 0, #fff 100%);    -pie-background:linear-gradient (# 8FB8FF 0, #fff 100%); IE 6-9     behavior:url (VIEW/JS/PIE.HTC);}

Hack2: Use compatible syntax.

Background:linear-gradient (#8fb8ff 0, #fff 100%); Background:-webkit-linear-gradient (#8fb8ff 0, #fff 100%) ; Background:-moz-linear-gradient (#8fb8ff 0, #fff 100%); Filter:progid:DXImageTransform.Microsoft.gradient ( Startcolorstr= ' #00000000 ', endcolorstr= ' #E5000000 ', gradienttype=0); gradienttype:0 vertical Gradient, 1 horizontal gradient

Each of the above two methods in different scenarios have their own advantages and disadvantages, in the project development,
Try to use a better one.

3. Structure pseudo-Class selector: Nth-of-type () invalid
hack: IE8 support First-child, change the code.

A.level0 Span:nth-of-type (1)-->a.level0 span:first-childa.level0 span:nth-of-type (2)-->a.level0 span: First-child+span//second child node A.level0 span:nth-of-type (3)-->a.level0 span:first-child+span+span//Third child node//etc

4. Box Shadow: Box-shadow failure
hack:p IE.HTC

p{    wdith:100px;    height:100px;    Background: #fff;     Although the background is white, it is best to set it, otherwise the effect may not be ideal after compatibility    box-shadow:10px 10px 10p #aaa;    Behavior:url (VIEW/JS/PIE.HTC)}

5. Transparent Color RGBA () failure
hack:p IE.HTC

. contaniner{    width:100px;    height:100px;    Background:rgba (0,0,0,0.5);    -pie-background:rgba (0,0,0,0.5);    Behavior:url (VIEW/JS/PIE.HTC);}

6.<input type= "checkbox"/> has default border
hack: It's fine to control it in a CSS file, like

Input[type= "checkbox"] {    border:none;}

7. By the way, filter filter,filter is a type of hack used to filter different browsers.
(1) 9: All IE browsers support
(2) 0:IE8, IE9 support, opera part support
(3) 90:IE8 partial support, IE9 support
(4) 09:IE8, IE9 support
Such as:

Background: #0f0;//chrome, Firefox display green background\0: #00f;//ie show Blue