Dev Faq
7
votes

Comment prévenir les cases à cocher et les déposer dans un DIP à être mis à l'échelle dans Safari

J'ai un div, qui contient des éléments. Je veux que Div soit mis à l'échelle quand il est plané. Cela fonctionne bien en chrome, mais quelque chose d'étrange arrive à Safari. Les cases à cocher et les déposées sont également à l'échelle. Comment puis-je le réparer dans Safari?

p> 

<div class="box">
  <div>
    <input type="checkbox" name="opt1" id="option1" /> hello
  </div>
  <div>
    <select>
      <option>apple</option>
      <option>orange</option>
    </select>
  </div>
  <div>
    <input type="text" placeholder="enter something" />
  </div>
</div>

2 commentaires

Je vois le même comportement en chrome et safari. Quelle version du système d'exploitation et de navigateur?

Chrome: version 58.0.3029.110 (64 bits) Safari: version 10.1.1 (11603.2.5) OS: Mac OS X 10.11.6

5 Réponses :

0
votes

Vous pouvez ajouter ceci à votre CSS code> sur les cases à cocher: 

-webkit-transform:scale(3, 3);

0 commentaires
6
votes

Ce n'est pas un problème spécifique du navigateur, la propriété de la balance de transformation fonctionne la manière dont elle devrait fonctionner, elle éclaide chaque élément (s) imbriqué (s) à 1.03 code> dans . / code> élément.

La seule façon dont vous disposez est d'utiliser la mise à l'échelle inverse sur les éléments enfants 1 / 1.03 = 0,97 code> p>

p> 

<div class="box">
  <div>
    <input type="checkbox" name="opt1" id="option1" /> hello
  </div>
  <div>
  <select>
    <option>apple</option>
    <option>orange</option>
  </select>
  </div>
  <div>
    <input type="text" placeholder="enter something" />
  </div>
</div>

0 commentaires
1
votes

Une autre solution serait de déplacer l'effet d'échelle sur un élément pseudo qui se comporte exactement identique à celui de votre div ( Boîte code>. Cet élément pseudo adaptera la hauteur et la largeur de cette div.

L'avantage de cette solution serait que le contenu de votre div .box code> ne serait plus affecté par l'échelle, car la balance ne se produit pas sur cette div. En outre, vous n'avez pas besoin de changer quoi que ce soit dans votre structure HTML. P>

p> 

<div class="box">
  <div>
    <input type="checkbox" name="opt1" id="option1" /> hello
  </div>
  <div>
    <select>
      <option>apple</option>
      <option>orange</option>
    </select>
  </div>
  <div>
    <input type="text" placeholder="enter something" />
  </div>
</div>

0 commentaires
0
votes 

<div class="box">
  <div>
    <input type="checkbox" name="opt1" id="option1" /> hello
  </div>
  <div>
    <select>
      <option>apple</option>
      <option>orange</option>
    </select>
  </div>
  <div>
    <input type="text" placeholder="enter something" />
  </div>
</div>

0 commentaires
0
votes

Ouais avec juste HTML, CSS seul Vous ne pouvez pas styler différemment pour Safari, Chrome et Opera, car toutes les trois utilisent le même drapeau -WebKit- pour le style utilisant CSS

afin que les solutions possibles soient de sorte que les solutions possibles sont de détecter le Navigateur à l'aide de JavaScript fort> et ajoutez une classe à votre corps pour indiquer le navigateur P>

.Safari .Box: Hover { p> 

<html>
<head>
    <title>TVEK Test App for srk</title>
</head>
<body>
    <script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
    <script type="text/javascript">
        $(function () {
            var userAgent = navigator.userAgent.toLowerCase(); 
            if (userAgent .indexOf('safari')!=-1){ 
                if(userAgent .indexOf('chrome')  > -1){
                    //browser is chrome
                    alert('chrome');
                }else if((userAgent .indexOf('opera')  > -1)||(userAgent .indexOf('opr')  > -1)){
                    //browser is opera 
                    alert('opera');
                }else{
                    //browser is safari, add css
                    alert('safari');
                    $("body").addClass("safari");
                }
            }
        });
    </script>
    <style type="text/css">
    .safari .box{
        /* add your required style here */
      margin:20px;
    }

    .box:hover {
      transform: scale(1.03);
      -ms-transform: scale(1.03);
      -webkit-transform: scale(1.03);
      -webkit-transition: all .01s ease-in-out;
      transition: all .01s ease-in-out;
    }

    div {
      padding-left: 30px;
      margin: 10px;
    }

    .box {
      border: 1px solid black;
    }
    </style>

    <div class="box">
        <div>
            <input type="checkbox" name="opt1" id="option1" /> hello
        </div>
        <div>
            <select>
                <option>apple</option>
                <option>orange</option>
            </select>
        </div>
        <div>
            <input type="text" placeholder="enter something" />
        </div>
    </div>
</body>
</html>

1 commentaires

Application de test TVEK pour Abhishek Pandey Pourquoi avez-vous inclus mon nom?

Articles qui pourrait vous intéresser :

Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
Select2 ne s'affiche pas correctement dans le mode bootstrap
Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Comment puis-je définir un format pour les nombres d'entrée dans Blazor