个人中心
gpt4 book ai didi

javascript - 三个按钮和左下角(.link div)一直隐藏到 i "inspect element"(在 Chrome 中)，然后它们立即出现。为什么？

转载 作者：行者123 更新时间：2023-11-28 13:29:15 25 4
gpt4 key购买 nike

这是代码。它适用于我的 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/

25 4 0
文章推荐： javascript - 通过 click() 检索 jQuery 中 div 的属性值
文章推荐： javascript - 使用 JavaScript 计算模数返回未定义
文章推荐： javascript - 传递两个不同参数的更短方法
文章推荐： javascript - 这是什么/*global $, window : false, document: false */
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com