本篇內(nèi)容主要講解“如何解決多行圖片hover加邊框會(huì)把下面的圖片擠到別處的問題”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“如何解決多行圖片hover加邊框會(huì)把下面的圖片擠到別處的問題”吧!

創(chuàng)新互聯(lián)公司主要從事網(wǎng)頁設(shè)計(jì)、PC網(wǎng)站建設(shè)（電腦版網(wǎng)站建設(shè)）、wap網(wǎng)站建設(shè)（手機(jī)版網(wǎng)站建設(shè)）、成都響應(yīng)式網(wǎng)站建設(shè)公司、程序開發(fā)、網(wǎng)站優(yōu)化、微網(wǎng)站、小程序定制開發(fā)等，憑借多年來在互聯(lián)網(wǎng)的打拼，我們?cè)诨ヂ?lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)積累了豐富的做網(wǎng)站、成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、網(wǎng)絡(luò)營銷經(jīng)驗(yàn)，集策劃、開發(fā)、設(shè)計(jì)、營銷、管理等多方位專業(yè)化運(yùn)作于一體。

問題：

遇到多行多列排列的圖片時(shí)，hover上去加邊框會(huì)把下面的圖片擠到別處

============================================================

注意：

IE11以下瀏覽器加載圖片會(huì)默認(rèn)給它加一個(gè)1px的邊框

解決方法：對(duì)圖片設(shè)置border:none

=============================================================

hover加邊框解決方案：

原先：

代碼如下:

<li>
<img />
<h4></h4>
<p></p>
</li>

1. 對(duì)元素設(shè)置透明邊框（推薦）：

代碼如下:

li{
border:2px solid transparent;
}
li:hover{
border:2px solid red;
}

2. 對(duì)元素外再包裹一層div

更改后：

代碼如下:

<li>
<div>
<img />
<h4></h4>
<p></p>
</div>
</li>

樣式：

代碼如下:

li{
wdith:468px;
}
div{
width:468px;
margin:2px;
padding:10px;
background-color:#fff;
}
div :hover{
margin:0;
border:2px solid red;
}

另外：

使用outline IE 7、8 不支持。

但它是顯示在元素上面不會(huì)對(duì)元素加邊框。不考慮IE兼容的可以直接用outline代替border

到此，相信大家對(duì)“如何解決多行圖片hover加邊框會(huì)把下面的圖片擠到別處的問題”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

本文標(biāo)題：如何解決多行圖片hover加邊框會(huì)把下面的圖片擠到別處的問題
URL地址：http://aaarwkj.com/article36/igispg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、外貿(mào)建站、自適應(yīng)網(wǎng)站、電子商務(wù)、ChatGPT、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)