para - internet explorer no respeta css

¿Cómo aplicar reglas CSS específicas solo a Chrome?

Question

¿Hay alguna forma de aplicar el siguiente CSS a un div específico solo en Google Chrome?

position:relative;
top:-2px;

Answer 1

¡Chrome no proporciona condicionales propios para establecer definiciones de CSS solo para él! No debería haber una necesidad de hacer esto, porque Chrome interpreta sitios web como los definidos en los estándares w3c.

Entonces, tienes dos posibilidades significativas:

1. Obtenga el navegador actual por javascript ( mira aquí )
2. Obtenga el navegador actual por php / servidor ( mire aquí )

Answer 2

Como sabemos, Chrome es un navegador Webkit , Safari también es un navegador Webkit y también Opera, por lo que es muy difícil orientarlo a Google Chrome, utilizando consultas de medios o hacks CSS, pero Javascript es realmente más efectivo.

Aquí está la pieza de código JavaScript que se dirigirá a Google Chrome 14 y posterior,

  var isChrome = !!window.chrome && !!window.chrome.webstore;

y debajo hay una lista de hacks de navegador disponibles, para Google Chrome, incluido el navegador influenciado, por ese truco

Hack WebKit:

.selector:not(*:root) {}

• Google Chrome : todas las versiones
• Safari : todas las versiones
• Opera : 14 y más tarde
• Android : todas las versiones

Compatible con Hacks:

@supports (-webkit-appearance:none) {}

Google Chrome 28 y Google Chrome> 28, Opera 14 y Opera> 14

• Google Chrome : 28 y más tarde
• Opera : 14 y más tarde

Propiedad / Value Hacks:

.selector { (;property: value;); }
.selector { [;property: value;]; }

Google Chrome 28, y Google Chrome <28, Opera 14 y Opera> 14, y Safari 7 y Less than 7. - Google Chrome : 28 y antes - Safari : 7 y antes - Opera : 14 y posterior

Hacks de JavaScript: 1

var isChromium = !!window.chrome;

• Google Chrome : todas las versiones
• Opera : 14 y más tarde
• Android : 4.0.4

Hacks de JavaScript: 2 {Webkit}

var isWebkit = ''WebkitAppearance'' in document.documentElement.style;

• Google Chrome : todas las versiones
• Safari : 3 y más tarde
• Opera : 14 y más tarde

Hacks de JavaScript: 3

var isChrome = !!window.chrome && !!window.chrome.webstore;

• Google Chrome : 14 y más tarde

Hacks de Media Query: 1

@media //0 screen {}

• Google Chrome : 22 a 28
• Safari : 7 y más tarde

Media Query Hacks: 2

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .selector {} }

• Google Chrome : 29 y posterior
• Opera : 16 y más tarde

Para obtener más información, visite este sitio web

Answer 3

Estoy usando un sass mixin para estilos de cromo, esto es para Chrome 29+ tomando prestada la solución de Martin Kristiansson anterior.

@mixin chrome-styles {
  @media screen and (-webkit-min-device-pixel-ratio:0)
    and (min-resolution:.001dpcm) {
      @content;
  }
}

Úselo así:

@include chrome-styles {
  .header { display: none; }
}

Answer 4

Nunca me encontré con una instancia en la que tuve que hacer un hack css solo para Chrome hasta ahora. Sin embargo, encontré esto para mover el contenido debajo de una presentación de diapositivas donde está claro: ambos; no afectó nada en Chrome (pero funcionó bien en cualquier otro lugar, ¡incluso en IE!).

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    /* Safari and Chrome, if Chrome rule needed */
    .container {
     margin-top:100px;
    }

    /* Safari 5+ ONLY */
    ::i-block-chrome, .container {
     margin-top:0px;
    }

Answer 5

Tan sencillo. Simplemente agregue una segunda clase o identificador a su elemento en el momento de la carga que especifique qué navegador es.

Así que, básicamente, en la parte delantera, detectar el navegador y luego establecer id / class y su css se definirá utilizando esas etiquetas de nombres específicos del navegador

Answer 6

Una actualización para cromo> 29 y Safari> 8:

Safari ahora también es compatible con la función @supports . Eso significa que esos hacks también serían válidos para Safari.

yo recomendaria

@ http://codepen.io/sebilasse/pen/BjMoye

/* Chrome only: */
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { 
  p {
    color: red;
  }
}

Answer 7

si lo deseas, podemos agregar clase a brwoser específico ver [enlace de violín] [1] [1]:

var BrowserDetect = {
        init: function () {
            this.browser = this.searchString(this.dataBrowser) || "Other";
            this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown";
        },
        searchString: function (data) {
            for (var i = 0; i < data.length; i++) {
                var dataString = data[i].string;
                this.versionSearchString = data[i].subString;

                if (dataString.indexOf(data[i].subString) !== -1) {
                    return data[i].identity;
                }
            }
        },
        searchVersion: function (dataString) {
            var index = dataString.indexOf(this.versionSearchString);
            if (index === -1) {
                return;
            }

            var rv = dataString.indexOf("rv:");
            if (this.versionSearchString === "Trident" && rv !== -1) {
                return parseFloat(dataString.substring(rv + 3));
            } else {
                return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
            }
        },

        dataBrowser: [
            {string: navigator.userAgent, subString: "Edge", identity: "MS Edge"},
            {string: navigator.userAgent, subString: "MSIE", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Trident", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Firefox", identity: "Firefox"},
            {string: navigator.userAgent, subString: "Opera", identity: "Opera"},  
            {string: navigator.userAgent, subString: "OPR", identity: "Opera"},  

            {string: navigator.userAgent, subString: "Chrome", identity: "Chrome"}, 
            {string: navigator.userAgent, subString: "Safari", identity: "Safari"}       
        ]
    };

    BrowserDetect.init();


    var bv= BrowserDetect.browser;
    if( bv == "Chrome"){
        $("body").addClass("chrome");
    }
    else if(bv == "MS Edge"){
     $("body").addClass("edge");
    }
    else if(bv == "Explorer"){
     $("body").addClass("ie");
    }
    else if(bv == "Firefox"){
     $("body").addClass("Firefox");
    }


$(".relative").click(function(){
$(".oc").toggle(''slide'', { direction: ''left'', mode: ''show'' }, 500);
$(".oc1").css({
   ''width'' : ''100%'',
   ''margin-left'' : ''0px'',
   });
});

.relative {
  background-color: red;
  height: 30px;
  position: relative;
  width: 30px;
}
.relative .child {
  left: 10px;
  position: absolute;
  top: 4px;
}
.oc {
  background: #ddd none repeat scroll 0 0;
  height: 300px;
  position: relative;
  width: 500px;
  float:left;
}
.oc1 {
  background: #ddd none repeat scroll 0 0;
  height: 300px;
  position: relative;
  width: 300px;
  float:left;
  margin-left: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<div class="relative">
<span class="child">
  ○
</span>
</div>
<div class="oc">
<div class="data"> </div>
</div>
<div class="oc1" style="display: block;">
<div class="data"> </div>
</div>

Answer 8

This selector de navegador CSS puede ayudarlo. Echar un vistazo.

CSS Browser Selector es un javascript muy pequeño con solo una línea que habilita a los selectores de CSS. Le da la capacidad de escribir código CSS específico para cada sistema operativo y cada navegador.

Answer 9

http://www.templatemonster.com/help/how-to-create-browser-specific-css-rules-styles.html

Aplique reglas CSS específicas a Chrome solo con .selector:not(*:root) con sus selectores:

div {
  color: forestgreen;
}
.selector:not(*:root), .div1 {
  color: #dd14d5;
}

<div class=''div1''>DIV1</div>
<div class=''div2''>DIV2</div>

Answer 10

Solución CSS

de https://jeffclayton.wordpress.com/2015/08/10/1279/

/* Chrome, Safari, AND NOW ALSO the Edge Browser and Firefox */
@media and (-webkit-min-device-pixel-ratio:0) {
  div{top:10;} 
}

/* Chrome 29+ */
@media screen and (-webkit-min-device-pixel-ratio:0)
  and (min-resolution:.001dpcm) {
    div{top:0;} 
}

/* Chrome 22-28 */
@media screen and(-webkit-min-device-pixel-ratio:0) {
  .selector {-chrome-:only(; 
     property:value;
  );} 
}

Solución de JavaScript

if (navigator.appVersion.indexOf("Chrome/") != -1) {
// modify button 
}

Answer 11

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
     /*your rules for chrome*/
     #divid{ 
         position:relative;
         top:-2px; 
     }
}

mira esto. trabaja para mí.