![](/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.