1

Estoy haciendo una página web con HTML, CSS y JS, pero el problema es que cuando actualizo en Chrome después de cada cambio en mi codigo, no se actualiza la página, y el código sigue siendo el mismo que antes. Al contrario que cuando hago lo mismo en Internet Explorer, ahí sí se actualizan los cambios y el código. ¿Alguien sabe cual es la razón?

Código HTML:

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>ASPATPERU-SISBIO</title>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Montserrat''>

      <link rel="stylesheet" href="css/inicio.css">


</head>

<body>
 <div id=bannerimagen>
  <img id="banner" src="img/portadainicio.jpg"/>
 </div>

  <div class="contenedor-menu">
<ul class="accordion-menu">
  <li>
    <div class="dropdownlink"><i class="fa fa-user" aria-hidden="true"></i> PACIENTES
      <i class="fa fa-chevron-down" aria-hidden="true"></i>
    </div>
    <ul class="submenuItems">
      <li><a href="#">History book 1</a></li>
      <li><a href="#">History book 2</a></li>
      <li><a href="#">History book 3</a></li>
    </ul>
  </li>
  <li>
    <div class="dropdownlink"><i class="fa fa-paper-plane" aria-hidden="true"></i> Fiction
      <i class="fa fa-chevron-down" aria-hidden="true"></i>
    </div>
    <ul class="submenuItems">
      <li><a href="#">Fiction book 1</a></li>
      <li><a href="#">Fiction book 2</a></li>
      <li><a href="#">Fiction book 3</a></li>
    </ul>
  </li>
</ul>
</div>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>

    <script src="js/inicio.js"></script>

</body>
</html>

Código CSS

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Montserrat', sans-serif;
  background: #FFFFFF;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

h2 {
  text-align: center;
  margin: 20px auto;
  color: #fff;
}

.accordion-menu {
  width: 100%;
  max-width: 350px;
  margin: 60px auto 20px;
  background: #fff;
  border-radius: 4px;
}

.contenedor-menu{
  position:absolute;
  top: 300px;
  left: 16px;

}

.accordion-menu li.open .dropdownlink {
  color: #CDDC39;
}
.accordion-menu li.open .dropdownlink .fa-chevron-down {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.accordion-menu li:last-child .dropdownlink {
  border-bottom: 0;
}

.dropdownlink {
  cursor: pointer;
  display: block;
  padding: 15px 15px 15px 45px;
  font-size: 18px;
  border-bottom: 1px solid #ccc;
  color: #212121;
  position: relative;
  -webkit-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}
.dropdownlink i {
  position: absolute;
  top: 17px;
  left: 16px;
}
.dropdownlink .fa-chevron-down {
  right: -15px;
  left: auto;
}

.submenuItems {
  display: none;
  background: #C8E6C9;
}
.submenuItems li {
  border-bottom: 1px solid #B6B6B6;
}

.submenuItems a {
  display: block;
  color: #727272;
  padding: 12px 12px 12px 45px;
  -webkit-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}
.submenuItems a:hover {
  background-color: #CDDC39;
  color: #fff;
}


#banner{
   position: absolute;
  top:  0px; 
  left: 20%;
  right: 10%
  width :300px;
}

Vista en Chrome:

VISTA DE CHROME

Vista en Internet Explorer

VISTA EN INTERNET EXPLORER

1
  • 1
    Con solo pulsar [F5] la pagina es cargada del cache del explorador, debes pulsar [CTRL] + [F5] para cargar la pagina del sitio WEB y actualizar el cache.
    – fwBasic
    Commented el 15 may. 2017 a las 16:44

2 respuestas 2

4

Desactiva el cache en la pestaña Network o Red del panel de Herramientas de desarrollador de tu navegador.

introducir la descripción de la imagen aquí

Tambien puede agregar versionamiento a tus archivos y subirlo mientras haces actualizaciones:

<link rel="stylesheet" href="css/inicio.css?v=0.0.1">

1

También puedes presionar Ctrl-Shift-N, lo cual abre una ventana de incógnito. Ésta es la forma más simple y rápida de tener una instancia nueva, sin que caché o cookies interfieran. Yo siempre hago eso cuando un cambio no se refleja y quiero asegurarme que no sea problema de caché del navegador.

Por cierto, en Opera y Vivaldi la combinación de teclas es la misma. Para Internet Explorer y Firefox, es Ctrl-Shift-P.

Otra opción más es agregar un parámetro en la url, como por ejemplo /tupagina?v=89234982734. De hecho esto es lo que hace jQuery de forma automática cuando le indicas que no cachee el request GET.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.