![](/img/trans.png)
[英]Onclick not working in IE or Firefox but does work in Chrome
[英]Href not working in Chrome, does work in IE
我有一個我正在嘗試的網站。 我已經獲得了一個模板,正在編輯HTML以對其進行自定義。 頁面上存在一個部分,其中包含三個圖標,並在其下方帶有“更多”按鈕。 我已將按鈕設置為鏈接到另一個網頁,但它僅在IE上有效-不適用於Chrome。 此外,圖標本身應該隨着您的懸停而改變,這又一次在IE中執行,但在chrome中卻沒有。
我有以下代碼:
.intro3 {
text-align: center;
color: $(intro3.color);
}
.intro3 .row {
width: 90%;
margin: 0 auto;
padding: 120px 0 120px 50px;
}
.images_author {
font-size: 6em;
}
.images_author span {
position: relative;
display: inline-block;
width: 160px;
height: 160px;
line-height: 160px;
color: $(intro3.circle.right);
border-width: 40px;
border-style: solid;
border-radius: 100%;
border-top-color: $(intro3.circle.left);
border-right-color: $(intro3.circle.right);
border-bottom-color: $(intro3.circle.right);
border-left-color: $(intro3.circle.left);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.authsx:hover .images_author span {
color: $(background.color.all);
border-style: double;
border-top-color: $(intro3.circle.left);
border-right-color: $(intro3.circle.left);
border-bottom-color: $(intro3.circle.right);
border-left-color: $(intro3.circle.right);
}
.intro3 .fourcol div.padd_25 {
padding: 25px;
}
.intro3 .fourcol div strong {
font: normal normal 22px PT Serif,serif;
line-height: 1.8em;
}
.intro3 .fourcol p a.more_aut {
font-size: 12px;
margin: 10px 0 10px 0;
display: inline-block;
padding: 10px 30px;
background: transparent;
color: $(intro3.color);
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
border: 2px solid $(intro3.color);
border-radius: 6px;
opacity: 0.6;
}
設置(執行動作的位置):
<div class='intro3'>
<div class='row'>
<h2 class='title_s authors'> Explore </h2>
<div class='fourcol authsx'>
<div class='images_author coll_1'>
<span class='icon fa fa-linkedin'/>
</div>
<div class='padd_25'>
<strong>LinkedIn Profile</strong>
<p>Connect via LinkedIn. See my skills, experience, and qualifications.</p>
<p><a class='more_aut' href='http://www.linkedin.com/in/amandabayless'><span>More</span></a></p>
</div>
</div>
<div class='fourcol authsx'>
<div class='images_author coll_2'>
<span class='icon fa fa-user'/>
</div>
<div class='padd_25'>
<strong>About Me</strong>
<p>Learn more about me. </p>
<p><a class='more_aut'>More</a></p>
</div>
</div>
<div class='fourcol last authsx'>
<div class='images_author coll_3'>
<span class='icon fa fa-paperclip'/>
</div>
<div class='padd_25'>
<strong>Samples of Work</strong>
<p>See a small sample of my work. </p>
<p><a class='more_aut'>More</a></p>
</div>
</div>
</div>
我在這里只具備非常基礎的技能,並且大量的互聯網搜索無法告訴我為什么瀏覽器有所不同。 供參考, 這是網站。 有人可以提供建議嗎? 我不知道從這里去哪里。
在#page-content
內部,有一個類intro3
的元素,該元素具有偽元素:after
。 偽元素覆蓋您的鏈接。 為其提供較低的z-index
或在不需要時將其刪除。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.