Javascript-форум (https://javascript.ru/forum/)
-   Internet Explorer (https://javascript.ru/forum/css-html-internet-explorer/)
-   -   не работает в IE (https://javascript.ru/forum/css-html-internet-explorer/57818-ne-rabotaet-v-ie.html)

galych 21.08.2015 10:52
не работает в IE
 
В других браузерах все гуд(появляются стрелочки вверх и вниз), а вот в IE не работает, хотя консоль не выдает ошибок. подскажите где собака зарыта?
Код:
<!DOCTYPE HTML>
<html>

<head>
  <style>
    body,
    html {
      height: 100%;
      width: 100%;
      padding: 0;
      margin: 0;
    }

    #matrix {
      width: 400px;
      margin: auto;
      overflow: auto;
      text-align: justify;
    }

    #updown {
      height: 9px;
      width: 14px;
      color: green;
      position: fixed;
      top: 10px;
      left: 10px;
      cursor: pointer;
    }

    #updown.up::before {
      content: '▲';
    }

    #updown.down::before {
      content: '▼';
    }
  </style>
  <meta charset="utf-8">
</head>

<body>

  <div id="matrix">
    <script>
      for (var i = 0; i < 2000; i++) document.writeln(i)
    </script>
  </div>

  <div id="updown"></div>

  <script>
    var updownElem = document.getElementById('updown');

    var pageYLabel = 0;

    updownElem.onclick = function() {
      var pageY = window.pageYOffset || document.documentElement.scrollTop;

      switch (this.className) {
        case 'up':
          pageYLabel = pageY;
          window.scrollTo(0, 0);
          this.className = 'down';
          break;

        case 'down':
          window.scrollTo(0, pageYLabel);
          this.className = 'up';
      }

    }

    window.onscroll = function() {
      var pageY = window.pageYOffset || document.documentElement.scrollTop;
      var innerHeight = document.documentElement.clientHeight;

      switch (updownElem.className) {
        case '':
          if (pageY > innerHeight) {
            updownElem.className = 'up';
          }
          break;

        case 'up':
          if (pageY < innerHeight) {
            updownElem.className = '';
          }
          break;

        case 'down':
          if (pageY > innerHeight) {
            updownElem.className = 'up';
          }
          break;

      }
    }
  </script>
</body>

</html>

рони 21.08.2015 11:18
galych,
версия ie?

galych 21.08.2015 15:46
пробовал 8 и 11

Главное в песочнице отрабатывает

ksa 21.08.2015 16:42
Цитата:
Сообщение от galych
Главное в песочнице отрабатывает
Может из-за кодировки... В твоем примере она вообще не указана.

ksa 21.08.2015 16:43
Как тут... :write: 
<!DOCTYPE HTML>
<html>

<head>
  <style>
    body,
    html {
      height: 100%;
      width: 100%;
      padding: 0;
      margin: 0;
    }

    #matrix {
      width: 400px;
      margin: auto;
      overflow: auto;
      text-align: justify;
    }

    #updown {
      height: 9px;
      width: 14px;
      color: green;
      position: fixed;
      top: 10px;
      left: 10px;
      cursor: pointer;
    }

    #updown.up::before {
      content: '▲';
    }

    #updown.down::before {
      content: '▼';
    }
  </style>
  <meta charset="utf-8">
</head>

<body>

  <div id="matrix">
    <script>
      for (var i = 0; i < 2000; i++) document.writeln(i)
    </script>
  </div>

  <div id="updown"></div>

  <script>
    var updownElem = document.getElementById('updown');

    var pageYLabel = 0;

    updownElem.onclick = function() {
      var pageY = window.pageYOffset || document.documentElement.scrollTop;

      switch (this.className) {
        case 'up':
          pageYLabel = pageY;
          window.scrollTo(0, 0);
          this.className = 'down';
          break;

        case 'down':
          window.scrollTo(0, pageYLabel);
          this.className = 'up';
      }

    }

    window.onscroll = function() {
      var pageY = window.pageYOffset || document.documentElement.scrollTop;
      var innerHeight = document.documentElement.clientHeight;

      switch (updownElem.className) {
        case '':
          if (pageY > innerHeight) {
            updownElem.className = 'up';
          }
          break;

        case 'up':
          if (pageY < innerHeight) {
            updownElem.className = '';
          }
          break;

        case 'down':
          if (pageY > innerHeight) {
            updownElem.className = 'up';
          }
          break;

      }
    }
  </script>
</body>

</html>

ksa 21.08.2015 16:44
В ИЕ9 стрелку вверх видно... :yes:

galych 21.08.2015 19:39
Цитата:
Сообщение от ksa (Сообщение 385080)
Может из-за кодировки... В твоем примере она вообще не указана.
а это что?
Код:
<meta charset="utf-8">

laimas 23.08.2015 04:42
#updown.up:before {
content: '▲';
}

#updown.down:before {
content: '▼';
}

laimas 23.08.2015 04:44
http://htmlbook.ru/css/before
http://htmlbook.ru/css3/before

galych 24.08.2015 04:15
Цитата:
Сообщение от laimas (Сообщение 385220)
#updown.up:before {
content: '▲';
}

#updown.down:before {
content: '▼';
}
К сожалению не помогло:(

laimas 24.08.2015 07:01
Да это собственно была реакция на вторичное предложение вам css3.
А IE и так content: "▲", и так content: "\25b2" отображает без проблем. Не будет отображено только в случае если не будет объявления !DOCTYPE.
А так & #9650; в любом случае отобразит - пробел добавил чтобы здесь не превращалось автоматом в ▲.
Может у вас стили перекрываются в чем либо?

galych 25.08.2015 03:14
Короче, забил я на этот код и сделал с использованием jquery библиотеки. Спасибо всем кто пытался мне помочь.


Часовой пояс GMT +3, время: 05:13.