css hack for safari chrome

css hack for safari chrome

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.
The web-kit browsers are
   1. Safari 
   2. Chrome

Table of Contents


I have need the target specific CSS for different browsers.
  1. CSS class which work on the IE, Firefox.
  2. CSS class which “CSS hack to target” Safari and Chrome browser
  3. 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
                }
          }


For more information you can visit

http://css-tricks.com/snippets/css/browser-specific-hacks/

ANIL SINGH

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Google Amazon and Flipkart Book Store!

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions
SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book