Hello everyone,
I’m going to share the code-sample for “css hack to target”.
I have an issues to display the log-out popup on-mouse-over on "log-out button" in the different browser (IE, safari and chrome) and we need to fixing using target specific css.
I’m going to share the code-sample for “css hack to target”.
I have an issues to display the log-out popup on-mouse-over on "log-out button" in the different browser (IE, safari and chrome) and we need to fixing using target specific css.
The web-kit browsers are
2. Chrome
I have need the target specific CSS for different browsers.
- CSS class which work on the IE, Firefox.
- CSS class which “CSS hack to target” Safari and Chrome browser
- CSS class which ”CSS hack to target” only Safari browser.
* We
hack to Safari and Chrome Webkit-browser targets.
* css hack for chrome and safari.
*/
Step 1: CSS class
which work on the IE, Firefox
.prfl_wrapper
{
position: absolute;
z-index: 999999;
display: block;
float: left;
border: 2px solid #ccc;
width: 64px;
padding: 1px 2px 0px 11px;
margin-top: 11px;
background: #fff;
border-radius: 5px 5px 5px 5px;
overflow:visible;
right: 175px;
}
Step 2: CSS
class which hack to target browser(Safari and Chrome)
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari and chrome
override */
.prfl_wrapper {
margin-top: 37px !important
}
}
Step 3: CSS
class which hack to target only Safari browser
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari only override */
::i-block-chrome , .prfl_wrapper {
margin-top: 37px !important
}