Вы можете найти здесь сайт.
В Chrome: значки сканируют некоторые пиксели случайным образом, когда вы наводите на них курсор, панель языков слишком низкая...
На IE: выглядит и работает правильно.
Здесь только самый важный из 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-код в исходном коде :)
Я думаю, что использую самую последнюю версию как IE, так и Chrome. Пожалуйста, помогите, спасибо :)
Кажется, что выравнивание по вертикали вашего контента вызывает...
Как вы можете видеть в зависимости от размера экрана, интервал изменится - (взгляните на свою полосу прокрутки)
Вы также можете добавить некоторый 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;
}
Добавить body {margin:0px; padding:0px;}
body {margin:0px; padding:0px;}
в ваш CSS