HTML - Сайт выглядит правильно в IE, но есть ошибки в Chrome?

0

Вы можете найти здесь сайт.

В Chrome: значки сканируют некоторые пиксели случайным образом, когда вы наводите на них курсор, панель языков слишком низкая...

На IE: выглядит и работает правильно.

Здесь только самый важный из CSS

CSS:

#main
{
    position: relative;
    overflow: hidden;
}

#varjo {
box-shadow: 5px 5px 10px gray;
}

.panel
{
    position: relative;
}

/* Me */

    #me
    {
    }

        #me .pic
        {
            position: relative;
            display: block;
            border-left: 1px #E1E1E1 solid;
        }

            /*
                The pseudo element below applies a noise pattern to the "me" image. It's
                meant to help mask blurriness, but you can remove it if you don't like it.
            */



            #me .pic:before
            {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                background: url('images/overlay.png');
                width: 100%;
                opacity: 0.5;
                height: 100%;
                z-index: 1;
            }

    #lang
{
background: black;
opacity: 0.7;
width: 95%;
font-family: Poiret One;
transition: 0.5s opacity;
cursor: default;
position: fixed:
}

::selection {
color: green;
}

#lang:hover{
opacity: 1;
}

    #lang a
    {
        position: relative;
        display: inline-block;
        color: #fff;
        width: 1em;
        width: 10%;
        height: 1em;
        line-height: 0.9em;
        margin-right: 150px;
        transition: 0.2s color;
        white-space:nowrap;
    }

    #lang a:hover {
    color: lightgreen;
    }

        #lang a.icon:before
        {
            padding-right: 0;
        }
#nav
{
margin-top: 20px;
}

    #nav a
    {
        position: relative;
        display: inline-block;
        color: #fff;
        width: 1em;
        height: 1em;
        line-height: 0.9em;
    }

        #nav a.icon:before
        {
            padding-right: 0;
        }

    .fa
{
    text-decoration: none;
    transition: all 0.5s;
}

    .fa.solo
    {
    }

        .fa.solo span
        {
            display: none;
        }

    .fa:before
    {
        display:inline-block;
        font-family: FontAwesome;
        font-size: 1.25em;
        text-decoration: none;
        font-style: normal;
        font-weight: normal;
        line-height: 1;
        -webkit-font-smoothing:antialiased;
        -moz-osx-font-smoothing:grayscale;
    }

Вы можете увидеть HTML-код в исходном коде :)

Хром:

Изображение 174551

IE:

Изображение 174551

Я думаю, что использую самую последнюю версию как IE, так и Chrome. Пожалуйста, помогите, спасибо :)

Теги:
google-chrome
css-transitions

2 ответа

2

Кажется, что выравнивание по вертикали вашего контента вызывает...

1920 X 1080 Экран - Chrome

Изображение 174551

Экран 1280 X 800 - Chrome

Изображение 174551

Как вы можете видеть в зависимости от размера экрана, интервал изменится - (взгляните на свою полосу прокрутки)

Вы также можете добавить некоторый margin-top: в свой # #nav элемент. Что-то вроде:

#nav {
   margin-top: 30px;
}

Другим важным изменением на вашем сайте является то, что вы установили opacity: 0 в вашем #nav.fa-film span. Непрозрачность 0 позволяет показать, когда вы нависаете (и я предполагаю, что вам нужно только показать эту подсказку, когда пользователь наведет иконки). Это более полезный набор, который охватывает как display: none а затем изменит ваш #nav a:hover span на

#nav a:hover span {
  display: inherit;
}
  • 0
    Нигде не вижу доблести. Вы имели в виду тег или ... И что я могу сделать, чтобы это исправить? А что с иконками?
  • 0
    @ user109899 Ответ обновлен :)
Показать ещё 6 комментариев
0

Добавить body {margin:0px; padding:0px;} body {margin:0px; padding:0px;} в ваш CSS

  • 0
    Это не помогает ...

Ещё вопросы

Сообщество Overcoder
Наверх
Меню