How to apply different CSS styles to a class in different browsers

.banner {
 padding: 2% 33% 2% 20 %;
}

/* Chrome 28+ (also affects Safari and MS Edge now) */< br />@supports (-webkit-appearance:none) {/* Needed styles */ }

/* Firefox (any) */
_:-moz-tree-row( hover), .selector {/* Needed styles */ }

/* Internet Explorer 11+ */
_:-ms-fullscreen, :root .selector {/* Needed styles * / }

/* Internet Explorer 10+ */
_:-ms-lang(x), .selector {/* Needed styles */ }

 /* Also Internet Explorer 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
 /* Needed styles */< br />}

/* Internet Explorer 9+ */
_::selection, .selector {/* Needed styles */ }

/* Safari 6.1+, Chrome for iOS */
@media screen and (min-color-index: 0) and(-webkit-min-device-pixel-ratio: 0) {@media {
 /* Needed styles */
}}

Welcome to Internet Explorer 7!

I have a class:

.banner {
 padding: 2% 33% 2% 20%;
}

Always normal in Chrome, but normal style for IE 10: 2% 22% 2% 23%. How to define a fill style that works in all these browsers?

/* Chrome 28+ (also affects Safari and MS Edge now) */
@supports (-webkit-appearance:none ) {/* Needed styles */ }

/* Firefox (any) */
_:-moz-tree-row(hover), .selector {/* Needed styles */ }

/* Internet Explorer 11+ */
_:-ms-fullscreen, :root .selector {/* Needed styles */ }

/* Internet Explorer 10+ */
_:-ms-lang(x), .selector {/* Needed styles */ }

/* Also Internet Explorer 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
 /* Needed styles */
}

 /* Internet Explorer 9+ */
_::selection, .selector {/* Needed styles */ }

/* Safari 6.1+, Chrome for iOS */
 @media screen and (min-color-index: 0) and(-webkit-min-device-pixel-ratio: 0) {@media {
 /* Needed styles */
}} 
If you need IE9-
 
For IE9- you can apply conditional comments and add style or link tags there. They also allow adding conditional tags to the browser.