![](/img/trans.png)
[英]HTML/CSS: IE adding offset to <li> - looks fine in Chrome, FF
[英]HTML - Website looks correct in IE but bugs in Chrome?
您可以在此处找到该网站。
在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的最新版本。 请帮忙,谢谢:)
似乎您内容的垂直对齐导致了...
如您所见,间距将根据屏幕大小而变化-(请看一下滚动条)
您还可以在#nav
元素中添加一些margin-top:
就像是:
#nav {
margin-top: 30px;
}
网站上的其他重要更改是您设置了opacity: 0
#nav .fa-film span
设置为opacity: 0
。 不透明度0允许您在鼠标悬停时显示(我猜您只需要在用户悬停图标时显示该工具提示)即可。 将span设置为display: none
更为有用display: none
,然后将#nav a:hover span
更改为
#nav a:hover span {
display: inherit;
}
添加body {margin:0px; padding:0px;}
body {margin:0px; padding:0px;}
到CSS
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.