如何更改我的 css 以使 hyper link 可见 [使用最少的示例代码]？
How to change my css to make hyper link visible [ with minimum sample code ]?
我有一个带有 CSS 的站点，但是超链接不可见 [右侧 ]，如何更改我的 html/css 以便超链接可见 [就像左侧下图] ?
我已经简化了我的网站以显示问题，这里是最简单的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>GATE Cyber Technology : Award Winning Innovation For Identity And Access Management</title>
<meta name="description" content="GATE Cyber Technology LLC. INTERCEPTION-RESISTANT AUTHENTICATION AND ENCRYPTION SYSTEM AND METHOD. Introducing a breakthrough digital security innovation : Graphic Access Tabular Entry [ GATE ], an interception-resistant authentication and encryption system and method. With the GATE system you are not afraid that you are watched when you enter passwords, and you are not afraid that the password will be intercepted, the GATE innovative method is designed to be peek-resistant and interception-resistant. The GATE system and method will offer you better digital security. Identity and Access Management (IAM)">
<meta name="keywords" content="GATE Cyber Technology LLC. INTERCEPTION-resistant AUTHENTICATION AND ENCRYPTION SYSTEM AND METHOD, Graphic Access Tabular Entry [ GATE ], GATE security, GATE authentication, GATE login, GATE user authentication, GATE password, GATE passcode, peek-resistant, online security, digital security, passwords, password protection, strong password, strong cybersecurity, strong user authentication, prevent password loss, prevent user credential loss, passcode, cyber security, pin, login, logon, digital access, online access, access control, online protection, digital protection, online defence, digital defence, message encryption, message decryption, signal encryption, signal decryption, overcome weakness of traditional password, the GATE system, award winning, better than fingerprinting, better than iris scanning, safer than keyfob, better than password manager, safer password entry, Identity and Access Management (IAM), GATE defeats wiretapping, keylogging, peeking, phishing and dictionary attack, no restrictions of traditional password's lowercase, uppercase, numbers and special characters requirements, easy to use">
<meta name="google-site-verification" content="cXY5hsdt7XCjR_k96nha7Hn5uW4fw_1u6mc2LWDyAQ0" />
<link rel="shortcut icon" href="favicon.ico">
<link media="all" type="text/css" rel="stylesheet" href="https://cdn.ahrefs.com/assets/css/bootstrap.min.css">
<link media="all" type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,300,100italic,100,300italic,400italic,700,700italic,900,900italic">
<link media="screen" type="text/css" rel="stylesheet" href="https://cdn.ahrefs.com/assets/css/home-responsive.css?20180815-001">
<link media="all" type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
<link media="all" type="text/css" rel="stylesheet" href="css/css.css">
<link media="screen" type="text/css" rel="stylesheet" href="css/home-responsive.css">
<meta property="og:image" content="GATE_1.PNG">
<style>
div.Intro
{
font-size: 100%;
text-align: left;
}
div.Table
{
font-size: 218%;
text-align: center;
}
a:hover { color:#ddeeff; }
a:visited { color:#E8E8E8 }
tr a{ font-size: 18px;color:#aabbcc; }
tr a:hover { color:#ddeeff; }
.pic-container-1{display:block; position:relative; }
.pic-container-1 .pic-box{display:block;}
.pic-container-1 .pic-box img{display:block;}
.pic-container-1 .pic-hover{position:absolute; top:0px; left:104px; display:none;}
.pic-container-1:hover .pic-hover{display:block;}
.pic-container-2{display:block; position:relative; }
.pic-container-2 .pic-box{display:block;}
.pic-container-2 .pic-box img{display:block;}
.pic-container-2 .pic-hover{position:absolute; top:0px; left:18px; display:none;}
.pic-container-2:hover .pic-hover{display:block;}
.pic-container-3{display:block; position:relative; }
.pic-container-3 .pic-box{display:block;}
.pic-container-3 .pic-box img{display:block;}
.pic-container-3 .pic-hover{position:absolute; top:0px; left:20px; display:none;}
.pic-container-3:hover .pic-hover{display:block;}
.pic-container-4{display:block; position:relative; }
.pic-container-4 .pic-box{display:block;}
.pic-container-4 .pic-box img{display:block;}
.pic-container-4 .pic-hover{position:absolute; top:0px; left:18px; display:none;}
.pic-container-4:hover .pic-hover{display:block;}
#GATE_Frame_1 { width: 78%; height: auto; }
#GATE_Frame_2 { width: 98%; height: auto; }
#Balance { width: 80%; height: auto; }
#Ted_Murphree_img { width: 36vw; height: auto; }
#Scott_Schober_img { width: 36vw; height: auto; }
#Cary_Pool_img { width: 36vw; height: auto; }
#Eduard_B_img { width: 36vw; height: auto; }
#Jonathan_Rosenoer_img { width: 36vw; height: auto; }
#Traditional_vs_GATE_1 { width: 96%; height: auto; }
#Traditional_vs_GATE_2 { width: 99.5%; height: auto; }
#modal
{
display: none;
position: fixed;
width: 100vw;
height: 100vh;
max-height: 100vh;
top: 0;
left: 0;
background: rgba(24, 24, 24, .6);
z-index: 999;
}
#modal .content
{
position: relative;
width: 55%;
height: 65vh;
margin: auto; /* allows horyzontal and vertical alignment as .content is in flex container */
}
#modal .content .yt-video
{
display: block;
width: 100%;
height: calc(100% - 45px);
}
#modal .content .title
{
box-sizing: border-box;
height: 45px;
line-height: 23px;
padding: 12px 4px;
margin: 0;
background: #007bff;
color: #fff;
text-align: center;
font-size: 26px;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#modal .close
{
position: absolute;
top: 0;
right: 0;
width: 45px;
height: 45px;
line-height: 36px;
text-align: center;
border: 0;
font-weight: bold;
font-size: 38px;
color: #fff;
background: #366;
cursor: pointer;
transition: background .2s;
}
#modal .content .close .a { font-size:38px;color: #ffffff; }
#modal .close:hover, #modal .close:active { background: #ff0000; }
#modal.is-visible { display: flex; }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: middle;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
// ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after
{
content: '';
content: none;
}
table
{
border-collapse: collapse;
border-spacing: 0;
}
</style>
</head>
<body class="page__guest ahrefs page-home">
<div id="localizejs">
<div class="content">
<a id="Awards"></a>
<div class="datas">
<div class="container center">
<Table Cellpadding=6>
<Tr>
<Td Align=Center><Br>
<Font Color=white><A Href=http://bestech.ittn.com.cn/#/projectlist2021 target=_blank>GATE has been selected</A> to the <A Href="2021_ZGC_Top_100_List_1.PNG" target=_blank>top 100</A>,<Br> among more than 2800 technologies collected<Br> from all over the world at 2021 ZGC<Br><A Href=http://bestech.ittn.com.cn/#/home target=_blank>International Technology Trade Conference</A>.</Font>
</Td>
</Tr>
</Table>
</div>
</div>
<!-- the modal div that will open when an anchor link is clicked to show the related video in an iframe. -->
<div id="modal">
<div class="content">
<div class="close"><a onclick = "return close_iFrame();">×</a></div>
<h4 class="title">.</h4>
<iframe class="yt-video" allowfullscreen></iframe>
</div>
</div>
<script>
var modal = document.getElementById('modal'),
closeBtn = modal.querySelector('close'),
ytVideo = modal.querySelector('.content .yt-video'),
title = modal.querySelector('.content .title'),
anchors = document.querySelectorAll('a[data-target="modal"]'),
l = anchors.length;
for (var i = 0; i < l; i++)
{
anchors[i].addEventListener("click", function (e)
{
e.preventDefault();
title.textContent = this.dataset.videoTitle || 'No title';
ytVideo.src = this.href;
modal.classList.toggle('is-visible');
modal.focus();
});
}
modal.addEventListener("keydown", function (e)
{
if (e.keyCode == 27)
{
title.textContent = '';
ytVideo.src = '';
this.classList.toggle('is-visible');
}
});
</script>
<script type="text/javascript">
function close_iFrame()
{
var modal = document.getElementById('modal'),
ytVideo = modal.querySelector('.content .yt-video');
ytVideo.src = '';
modal.classList.toggle('is-visible');
// Opera 8.0+
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
// Firefox 1.0+
var isFirefox = typeof InstallTrigger !== 'undefined';
// Safari 3.0+ "[object HTMLElementConstructor]"
var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);
// Internet Explorer 6-11
var isIE = /*@cc_on!@*/false || !!document.documentMode;
// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;
// Chrome 1+
var isChrome = !!window.chrome && !!window.chrome.webstore;
// Blink engine detection
var isBlink = (isChrome || isOpera) && !!window.CSS;
var output = 'Detecting browsers by ducktyping :\n===========================\n';
output+='isChrome: '+isChrome+'\n'; // 57.8 % Market Share
output+='isSafari: '+isSafari+'\n'; // 14.0 %
output+='isFirefox: '+isFirefox+'\n'; // 6.0 %
output+='isIE: '+isIE+'\n';
output+='isEdge: '+isEdge+'\n'; // 5.9 % IE + Edge
output+='isOpera: '+isOpera+'\n'; // 3.7 %
output+='isBlink: '+isBlink+'\n';
// alert(output+'[ history.length = '+history.length+' ]');
if (isChrome) // 57.8 % [ Will work correctly only after 3rd+ time of going to the #Videos section ]
{
/*
[1] No code : after 1st play, "back" plays sound
after 2nd play, "back" also plays sound, remembers history
after play 2 videos, 1 "back" plays last vodeo, 2 "back" does nothing, 3 "back" plays 2nd last video
Seems to remember [ empty ] + [ video ]
Memory pattern : Top [video_1] [ ] [video_2] ?
*/
if (!sessionStorage.getItem("runOnce")) // 1st time : Remembers 1st video // 2nd time : back to top after closing iFrame // 3rd time+ : works correctly
{
// alert('runOnce');
window.history.replaceState({},"Videos","#Videos");
// window.location.href='#Videos';
// history.go(0);
sessionStorage.setItem("runOnce",true);
}
else
{
window.history.replaceState({},"Videos","#Videos");
history.go(-1);
}
}
else if (isSafari) // 14.0
{
}
else if (isFirefox) // 6.0 % [ Works correctly ]
{
history.go(-1);
}
else if (isIE)
{
window.history.replaceState({},"Videos","#Videos");
}
else if (isEdge) // 5.9 % IE + Edge
{
history.go(-1);
}
else if (isOpera) // 3.7 %
{
history.go(-1);
}
else if (isBlink)
{
history.go(-1);
}
//alert( window.location.href );
// history.go(-1);
//window.location.href = '#Videos';
//history.replaceState({}, "#Videos", "#Videos");
//alert( window.location.href );
}
window.onload = function()
{
// Opera 8.0+
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
// Firefox 1.0+
var isFirefox = typeof InstallTrigger !== 'undefined';
// Safari 3.0+ "[object HTMLElementConstructor]"
var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);
// Internet Explorer 6-11
var isIE = /*@cc_on!@*/false || !!document.documentMode;
// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;
// Chrome 1+
var isChrome = !!window.chrome && !!window.chrome.webstore;
// Blink engine detection
var isBlink = (isChrome || isOpera) && !!window.CSS;
var output = 'Detecting browsers by ducktyping :\n===========================\n';
output+='isChrome: '+isChrome+'\n'; // 57.8 % Market Share
output+='isSafari: '+isSafari+'\n'; // 14.0 %
output+='isFirefox: '+isFirefox+'\n'; // 6.0 %
output+='isIE: '+isIE+'\n';
output+='isEdge: '+isEdge+'\n'; // 5.9 % IE + Edge
output+='isOpera: '+isOpera+'\n'; // 3.7 %
output+='isBlink: '+isBlink+'\n';
// alert(output);
if (isIE)
{
// alert(output);
var pichover=document.getElementsByClassName("pic-hover");
pichover[0].style.left="107px";
pichover[1].style.left="24px";
pichover[2].style.left="23px";
pichover[3].style.left="21px";
}
}
</script>
</body>
</html>
但这很糟糕
a[href] {color: blue !important, text-decoration: underline !important}
我在@Ki 的提示下弄明白了 [非常感谢 ^_^ ！ ]
虽然你的回答没有直接显示解决方案，但它为我指明了正确的方向，所以通过更多的研究和测试，我终于得出了正确的结论，你的回答比其他人的评论更有帮助我在这里待了太久以至于没有意识到这个和那个，我什至不想重复说过的话[浪费时间！ ]
a:link { 颜色:#d8d8d8 ;文字装饰：下划线}
这个问题和答案将对其他有类似问题的人有用！
我有一个带有 CSS 的站点，但是超链接不可见 [右侧 ]，如何更改我的 html/css 以便超链接可见 [就像左侧下图] ?
我已经简化了我的网站以显示问题，这里是最简单的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>GATE Cyber Technology : Award Winning Innovation For Identity And Access Management</title>
<meta name="description" content="GATE Cyber Technology LLC. INTERCEPTION-RESISTANT AUTHENTICATION AND ENCRYPTION SYSTEM AND METHOD. Introducing a breakthrough digital security innovation : Graphic Access Tabular Entry [ GATE ], an interception-resistant authentication and encryption system and method. With the GATE system you are not afraid that you are watched when you enter passwords, and you are not afraid that the password will be intercepted, the GATE innovative method is designed to be peek-resistant and interception-resistant. The GATE system and method will offer you better digital security. Identity and Access Management (IAM)">
<meta name="keywords" content="GATE Cyber Technology LLC. INTERCEPTION-resistant AUTHENTICATION AND ENCRYPTION SYSTEM AND METHOD, Graphic Access Tabular Entry [ GATE ], GATE security, GATE authentication, GATE login, GATE user authentication, GATE password, GATE passcode, peek-resistant, online security, digital security, passwords, password protection, strong password, strong cybersecurity, strong user authentication, prevent password loss, prevent user credential loss, passcode, cyber security, pin, login, logon, digital access, online access, access control, online protection, digital protection, online defence, digital defence, message encryption, message decryption, signal encryption, signal decryption, overcome weakness of traditional password, the GATE system, award winning, better than fingerprinting, better than iris scanning, safer than keyfob, better than password manager, safer password entry, Identity and Access Management (IAM), GATE defeats wiretapping, keylogging, peeking, phishing and dictionary attack, no restrictions of traditional password's lowercase, uppercase, numbers and special characters requirements, easy to use">
<meta name="google-site-verification" content="cXY5hsdt7XCjR_k96nha7Hn5uW4fw_1u6mc2LWDyAQ0" />
<link rel="shortcut icon" href="favicon.ico">
<link media="all" type="text/css" rel="stylesheet" href="https://cdn.ahrefs.com/assets/css/bootstrap.min.css">
<link media="all" type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,300,100italic,100,300italic,400italic,700,700italic,900,900italic">
<link media="screen" type="text/css" rel="stylesheet" href="https://cdn.ahrefs.com/assets/css/home-responsive.css?20180815-001">
<link media="all" type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
<link media="all" type="text/css" rel="stylesheet" href="css/css.css">
<link media="screen" type="text/css" rel="stylesheet" href="css/home-responsive.css">
<meta property="og:image" content="GATE_1.PNG">
<style>
div.Intro
{
font-size: 100%;
text-align: left;
}
div.Table
{
font-size: 218%;
text-align: center;
}
a:hover { color:#ddeeff; }
a:visited { color:#E8E8E8 }
tr a{ font-size: 18px;color:#aabbcc; }
tr a:hover { color:#ddeeff; }
.pic-container-1{display:block; position:relative; }
.pic-container-1 .pic-box{display:block;}
.pic-container-1 .pic-box img{display:block;}
.pic-container-1 .pic-hover{position:absolute; top:0px; left:104px; display:none;}
.pic-container-1:hover .pic-hover{display:block;}
.pic-container-2{display:block; position:relative; }
.pic-container-2 .pic-box{display:block;}
.pic-container-2 .pic-box img{display:block;}
.pic-container-2 .pic-hover{position:absolute; top:0px; left:18px; display:none;}
.pic-container-2:hover .pic-hover{display:block;}
.pic-container-3{display:block; position:relative; }
.pic-container-3 .pic-box{display:block;}
.pic-container-3 .pic-box img{display:block;}
.pic-container-3 .pic-hover{position:absolute; top:0px; left:20px; display:none;}
.pic-container-3:hover .pic-hover{display:block;}
.pic-container-4{display:block; position:relative; }
.pic-container-4 .pic-box{display:block;}
.pic-container-4 .pic-box img{display:block;}
.pic-container-4 .pic-hover{position:absolute; top:0px; left:18px; display:none;}
.pic-container-4:hover .pic-hover{display:block;}
#GATE_Frame_1 { width: 78%; height: auto; }
#GATE_Frame_2 { width: 98%; height: auto; }
#Balance { width: 80%; height: auto; }
#Ted_Murphree_img { width: 36vw; height: auto; }
#Scott_Schober_img { width: 36vw; height: auto; }
#Cary_Pool_img { width: 36vw; height: auto; }
#Eduard_B_img { width: 36vw; height: auto; }
#Jonathan_Rosenoer_img { width: 36vw; height: auto; }
#Traditional_vs_GATE_1 { width: 96%; height: auto; }
#Traditional_vs_GATE_2 { width: 99.5%; height: auto; }
#modal
{
display: none;
position: fixed;
width: 100vw;
height: 100vh;
max-height: 100vh;
top: 0;
left: 0;
background: rgba(24, 24, 24, .6);
z-index: 999;
}
#modal .content
{
position: relative;
width: 55%;
height: 65vh;
margin: auto; /* allows horyzontal and vertical alignment as .content is in flex container */
}
#modal .content .yt-video
{
display: block;
width: 100%;
height: calc(100% - 45px);
}
#modal .content .title
{
box-sizing: border-box;
height: 45px;
line-height: 23px;
padding: 12px 4px;
margin: 0;
background: #007bff;
color: #fff;
text-align: center;
font-size: 26px;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#modal .close
{
position: absolute;
top: 0;
right: 0;
width: 45px;
height: 45px;
line-height: 36px;
text-align: center;
border: 0;
font-weight: bold;
font-size: 38px;
color: #fff;
background: #366;
cursor: pointer;
transition: background .2s;
}
#modal .content .close .a { font-size:38px;color: #ffffff; }
#modal .close:hover, #modal .close:active { background: #ff0000; }
#modal.is-visible { display: flex; }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: middle;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
// ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after
{
content: '';
content: none;
}
table
{
border-collapse: collapse;
border-spacing: 0;
}
</style>
</head>
<body class="page__guest ahrefs page-home">
<div id="localizejs">
<div class="content">
<a id="Awards"></a>
<div class="datas">
<div class="container center">
<Table Cellpadding=6>
<Tr>
<Td Align=Center><Br>
<Font Color=white><A Href=http://bestech.ittn.com.cn/#/projectlist2021 target=_blank>GATE has been selected</A> to the <A Href="2021_ZGC_Top_100_List_1.PNG" target=_blank>top 100</A>,<Br> among more than 2800 technologies collected<Br> from all over the world at 2021 ZGC<Br><A Href=http://bestech.ittn.com.cn/#/home target=_blank>International Technology Trade Conference</A>.</Font>
</Td>
</Tr>
</Table>
</div>
</div>
<!-- the modal div that will open when an anchor link is clicked to show the related video in an iframe. -->
<div id="modal">
<div class="content">
<div class="close"><a onclick = "return close_iFrame();">×</a></div>
<h4 class="title">.</h4>
<iframe class="yt-video" allowfullscreen></iframe>
</div>
</div>
<script>
var modal = document.getElementById('modal'),
closeBtn = modal.querySelector('close'),
ytVideo = modal.querySelector('.content .yt-video'),
title = modal.querySelector('.content .title'),
anchors = document.querySelectorAll('a[data-target="modal"]'),
l = anchors.length;
for (var i = 0; i < l; i++)
{
anchors[i].addEventListener("click", function (e)
{
e.preventDefault();
title.textContent = this.dataset.videoTitle || 'No title';
ytVideo.src = this.href;
modal.classList.toggle('is-visible');
modal.focus();
});
}
modal.addEventListener("keydown", function (e)
{
if (e.keyCode == 27)
{
title.textContent = '';
ytVideo.src = '';
this.classList.toggle('is-visible');
}
});
</script>
<script type="text/javascript">
function close_iFrame()
{
var modal = document.getElementById('modal'),
ytVideo = modal.querySelector('.content .yt-video');
ytVideo.src = '';
modal.classList.toggle('is-visible');
// Opera 8.0+
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
// Firefox 1.0+
var isFirefox = typeof InstallTrigger !== 'undefined';
// Safari 3.0+ "[object HTMLElementConstructor]"
var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);
// Internet Explorer 6-11
var isIE = /*@cc_on!@*/false || !!document.documentMode;
// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;
// Chrome 1+
var isChrome = !!window.chrome && !!window.chrome.webstore;
// Blink engine detection
var isBlink = (isChrome || isOpera) && !!window.CSS;
var output = 'Detecting browsers by ducktyping :\n===========================\n';
output+='isChrome: '+isChrome+'\n'; // 57.8 % Market Share
output+='isSafari: '+isSafari+'\n'; // 14.0 %
output+='isFirefox: '+isFirefox+'\n'; // 6.0 %
output+='isIE: '+isIE+'\n';
output+='isEdge: '+isEdge+'\n'; // 5.9 % IE + Edge
output+='isOpera: '+isOpera+'\n'; // 3.7 %
output+='isBlink: '+isBlink+'\n';
// alert(output+'[ history.length = '+history.length+' ]');
if (isChrome) // 57.8 % [ Will work correctly only after 3rd+ time of going to the #Videos section ]
{
/*
[1] No code : after 1st play, "back" plays sound
after 2nd play, "back" also plays sound, remembers history
after play 2 videos, 1 "back" plays last vodeo, 2 "back" does nothing, 3 "back" plays 2nd last video
Seems to remember [ empty ] + [ video ]
Memory pattern : Top [video_1] [ ] [video_2] ?
*/
if (!sessionStorage.getItem("runOnce")) // 1st time : Remembers 1st video // 2nd time : back to top after closing iFrame // 3rd time+ : works correctly
{
// alert('runOnce');
window.history.replaceState({},"Videos","#Videos");
// window.location.href='#Videos';
// history.go(0);
sessionStorage.setItem("runOnce",true);
}
else
{
window.history.replaceState({},"Videos","#Videos");
history.go(-1);
}
}
else if (isSafari) // 14.0
{
}
else if (isFirefox) // 6.0 % [ Works correctly ]
{
history.go(-1);
}
else if (isIE)
{
window.history.replaceState({},"Videos","#Videos");
}
else if (isEdge) // 5.9 % IE + Edge
{
history.go(-1);
}
else if (isOpera) // 3.7 %
{
history.go(-1);
}
else if (isBlink)
{
history.go(-1);
}
//alert( window.location.href );
// history.go(-1);
//window.location.href = '#Videos';
//history.replaceState({}, "#Videos", "#Videos");
//alert( window.location.href );
}
window.onload = function()
{
// Opera 8.0+
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
// Firefox 1.0+
var isFirefox = typeof InstallTrigger !== 'undefined';
// Safari 3.0+ "[object HTMLElementConstructor]"
var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);
// Internet Explorer 6-11
var isIE = /*@cc_on!@*/false || !!document.documentMode;
// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;
// Chrome 1+
var isChrome = !!window.chrome && !!window.chrome.webstore;
// Blink engine detection
var isBlink = (isChrome || isOpera) && !!window.CSS;
var output = 'Detecting browsers by ducktyping :\n===========================\n';
output+='isChrome: '+isChrome+'\n'; // 57.8 % Market Share
output+='isSafari: '+isSafari+'\n'; // 14.0 %
output+='isFirefox: '+isFirefox+'\n'; // 6.0 %
output+='isIE: '+isIE+'\n';
output+='isEdge: '+isEdge+'\n'; // 5.9 % IE + Edge
output+='isOpera: '+isOpera+'\n'; // 3.7 %
output+='isBlink: '+isBlink+'\n';
// alert(output);
if (isIE)
{
// alert(output);
var pichover=document.getElementsByClassName("pic-hover");
pichover[0].style.left="107px";
pichover[1].style.left="24px";
pichover[2].style.left="23px";
pichover[3].style.left="21px";
}
}
</script>
</body>
</html>
但这很糟糕
a[href] {color: blue !important, text-decoration: underline !important}
我在@Ki 的提示下弄明白了 [非常感谢 ^_^ ！ ]
虽然你的回答没有直接显示解决方案，但它为我指明了正确的方向，所以通过更多的研究和测试，我终于得出了正确的结论，你的回答比其他人的评论更有帮助我在这里待了太久以至于没有意识到这个和那个，我什至不想重复说过的话[浪费时间！ ]
a:link { 颜色:#d8d8d8 ;文字装饰：下划线}
这个问题和答案将对其他有类似问题的人有用！