Tema: problemas con el zoom
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 03/09/2015, 16:21
estoesmucomplicao
 
Fecha de Ingreso: octubre-2013
Mensajes: 6
Antigüedad: 11 años, 3 meses
Puntos: 0
problemas con el zoom
Hola, estoy haciendo una página por primera vez y tengo problemas cuando pruebo el zoom de los navegadores, el ctrl+. He visto muchas consultas de problemas con el zoom pero parece que no existe una solución general no?.
En mi caso particular cuando hago zoom este sólo se hace sobre lo que parece ser el borde de un select y de botones, si quito estos directamente no hace ningún zoom.
Qué se debe hacer o evitar para que el zoom funcione porque yo estoy muy perdido.
Gracias.

Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.             
  8.  
  9.         <script type="text/javascript" src="jquery-1.11.2.min.js"></script>
  10.         <script type="text/javascript" src="d3.v2.min.js"></script>
  11.     <style type="text/css">
  12.  html {
  13.          font-size: 10pt;
  14.     }
  15.     
  16.     #supercapa {width: 100%; margin: 0px auto; padding: 0px; background:#C0C0C0}
  17.     #capa1 {width: 35%; height: 93%; left:7.5%; top:7%; background-color: #FF0000; position:absolute;}
  18.     #capa2 {width: 35%; height: 100%; right:7.5%; top:0%; background-color: #0000FF; position:absolute;}
  19.     
  20.     select::-ms-expand {
  21.     display: none;
  22. }   
  23.     
  24.     #mySelect{
  25.                   position:absolute;
  26.                   display: inline-block;
  27.                   z-index: 3;
  28.                   -moz-appearance: none;
  29.                   -webkit-appearance: none;
  30.                   appearance:none;
  31.                   cursor: pointer;
  32.                   
  33.                   background: #a1b74b;
  34.                   left:18%;
  35.                   width: 14%;
  36.                   height: 6%;
  37.                   top: 3%;
  38.                   
  39.                   font-size:1.2vw;
  40.                   font-family:verdana;
  41.                   font-weight: bold;
  42.                   padding-left: 0.4%;
  43.                   color:#e2e3db;
  44.                    
  45.                    
  46.                    box-shadow: inset 3px 3px 3px rgba(255,255,255,.7), inset -2px -2px 3px rgba(0,0,0,.1), 2px 2px 10px rgba(0,0,0,.1);
  47.                    
  48.                    border: none !important;
  49.                    border-radius:2vw;
  50.                                
  51.                                   
  52.                    
  53.                 }
  54.     #mySelect:hover{ -moz-box-shadow: 0 0 18px #336600; -webkit-box-shadow: 0 0 18px #336600; box-shadow: 0 0 18px #336600; }
  55.     
  56.     
  57.     
  58.     
  59.     
  60.     </style>
  61.     
  62.     </head>
  63. <body>
  64.  
  65.         
  66.     <div id='supercapa'>
  67.                 
  68.                 
  69.                 <select id="mySelect">
  70.                     
  71.                      <option value="select">select</option>
  72.                      <option value="volvo">Volvo</option>
  73.                       <option value="saab">Saab</option>
  74.                       <option value="mercedes">Mercedes</option>
  75.                       <option value="audi">Audi</option>
  76.                     
  77.                 </select>
  78.             
  79.             
  80.         
  81.         <div id='capa1'></div>
  82.                             
  83.                 
  84.         <div id='capa2'></div>
  85.             
  86.         
  87.     </div>
  88. </body>
  89. </html>