这是代码。它适用于我的 macbook pro，但当我在我的 iMac 上启动它时却无法使用。同样，问题是 #photoshop-link、#illustrator-link 和 #indesign-link 在(某些)计算机上的谷歌浏览器中不可见，直到我“检查元素”然后它们立即出现。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Kyle's Gallery</title>
JavaScript:
function closeWindow() {
$("#intro").fadeOut(500);
$("#screen").fadeOut(500);
}
</script>
CSS:
<style type="text/css">
body,td,th {
font-family: Verdana, Geneva, sans-serif;
font-size: 18px;
}
body {
color: white;
}
#container {
height: 650px;
width: 900px;
background-image: url(images/IrisMask.png);
background-size:cover;
padding: 50px;
}
#title {
font-size: 40pt;
margin-right: -400px;
text-align:center;
}
#logo {
float: left;
margin-left: 20px;
}
#content {
margin-top: 50px;
}
#center {
border-radius: 10px;
position: absolute;
width: 820px;
height: 355px;
background-color: black;
opacity: 0.7;
z-index: 5;
left: 500px;
margin-left: -400px;
}
#center-content {
border-radius: 10px;
border-color: white;
border-width: 2px;
border-style:solid;
position: absolute;
opacity: 1;
z-index: 10;
width: 800px;
height: 300px;
left: 500px;
margin-left: -400px;
padding: 25px;
text-align:center;
}
#screen {
position: absolute;
height: 750px;
width: 1000px;
z-index: 3;
background-color: black;
opacity: 0.7;
}
#screen:hover {
position: absolute;
height: 750px;
width: 1000px;
z-index: 3;
background-color: black;
opacity: 0.7;
cursor: pointer;
}
.preview:hover {
cursor: pointer;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
#headshot {
float: left;
border-radius: 14px;
border-color: white;
border-width: 2px;
border-style:solid;
margin-top: -10px;
margin-left: 15px;
}
#intro-text {
float: left;
width: 540px;
font-size: 12pt;
}
#links {
position: absolute;
bottom: 80px;
left:70px;
z-index: 3;
}
#photoshop-link {
}
#illustrator-link {
margin-left: 75px;
}
#indesign-link {
margin-left: 150px;
}
.link {
width:200px;
border-radius: 10px;
border-color: white;
border-width: 2px;
border-style:solid;
font-size: 14pt;
font-weight: bold;
padding: 10px;
margin: 10px;
text-align:center;
}
.link:hover {
width:200px;
border-radius: 10px;
border-color: white;
border-width: 2px;
border-style:solid;
font-size: 14pt;
font-weight: bold;
padding: 10px;
margin: 10px;
text-align:center;
cursor: pointer;
}
</style>
HTML:
</head>
<body>
<div id="screen" onclick="javascript:closeWindow()">
</div>
<div id="container">
<div id="logo">
<img src="images/logo.png" >
</div>
<div id="title">
Kyle Sundman
</div>
<div class="clearfix"></div>
<div id="content">
<div id="intro">
<div id="center">
</div>
<div id="center-content">
<div id="intro-text">
Greetings world.<br /><br />
I would like to thank you for taking the time to view my gallery.<br /><br />
All content on this site (and the site itself) has been created by me, personally, for the culmination of an intermediary design course at Pepperdine University.<br /><br />
Click the links to view information about the topic, and click the edge of the screen to close the displayed windows (like this one).<br /><br />
Enjoy!<br /><br />
~ Kyle Sundman
</div>
<div id="headshot">
<img src="images/headshot.png" >
</div>
</div>
</div>
<div id="links">
<div id="photoshop-link" class="link">
Photoshop
</div>
<div id="illustrator-link" class="link">
Illustrator
</div>
<div id="indesign-link" class="link">
InDesign
</div>
</div>
</div>
</div>
</body>
</html>
最佳答案
它们只是漂浮在较大窗口上黑框的底部边缘。
由于 css 的“底部”属性。
我觉得自己很笨。
关于javascript - 三个按钮和左下角(.link div)一直隐藏到 i "inspect element"(在 Chrome 中)，然后它们立即出现。为什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13750057/