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
}
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|