圖片在瀏覽器中底部對(duì)齊 解決方法之一
更新時(shí)間：2011年11月30日 23:43:08 作者：
需要在列表中顯示很多圖片，圖片高低不同，寬度都設(shè)置一樣了，要底部對(duì)齊
style="vertical-align:bottom;"不管用，上網(wǎng)搜索說(shuō)要用js實(shí)現(xiàn)，找了個(gè)代碼，測(cè)試不成功，主要是代碼太多太亂沒(méi)法心情測(cè)試了。
于是就自己寫(xiě)吧。
$(function () {
if ($.browser.msie || $.browser.mozilla || $.browser.opera) {//IE 火狐 Opera之類瀏覽器
$(".productli img").each(function () {
var margin = 120 - $(this).height();
$(this).css("margin-top", margin + "px");
});
}
if ($.browser.safari) {//如果是蘋(píng)果或chrome瀏覽器
$(".productli img").load(function () {
var margin = 120 - $(this).height();
$(this).css("margin-top", margin + "px");
});
}
})
經(jīng)測(cè)試以下瀏覽器通過(guò)
IE6、 IE8、Chrome、 Opear、 FireFox、 QQ瀏覽器、 360、 傲游、 蘋(píng)果
百度之類IE內(nèi)核的就沒(méi)測(cè)了肯定能用。
期待更精簡(jiǎn)代碼出現(xiàn)。
于是就自己寫(xiě)吧。
復(fù)制代碼 代碼如下:
$(function () {
if ($.browser.msie || $.browser.mozilla || $.browser.opera) {//IE 火狐 Opera之類瀏覽器
$(".productli img").each(function () {
var margin = 120 - $(this).height();
$(this).css("margin-top", margin + "px");
});
}
if ($.browser.safari) {//如果是蘋(píng)果或chrome瀏覽器
$(".productli img").load(function () {
var margin = 120 - $(this).height();
$(this).css("margin-top", margin + "px");
});
}
})
經(jīng)測(cè)試以下瀏覽器通過(guò)
IE6、 IE8、Chrome、 Opear、 FireFox、 QQ瀏覽器、 360、 傲游、 蘋(píng)果
百度之類IE內(nèi)核的就沒(méi)測(cè)了肯定能用。
期待更精簡(jiǎn)代碼出現(xiàn)。
相關(guān)文章
本文搜集了大量 jQuery 表格插件，幫助 Web 設(shè)計(jì)者更好地駕御 HTML 表格，你可以對(duì)表格進(jìn)行橫向和豎向排序，設(shè)置固定表頭，對(duì)表格進(jìn)行搜索，對(duì)大表格進(jìn)行分頁(yè)，對(duì)表格進(jìn)行滾動(dòng)，拖放操作等等。這些插件很多都包含詳細(xì)的教程。2010-04-04
JQ獲取動(dòng)態(tài)加載的圖片大小的正確方法分享
這篇文章介紹了JQ獲取動(dòng)態(tài)加載的圖片大小的正確方法，有需要的朋友可以參考一下2013-11-11
jQuery實(shí)現(xiàn)360°全景拖動(dòng)展示
360全景就是視角超過(guò)人的正常視角的圖像，而我們這里說(shuō)的全景特指水平視角360度，垂直視角180度的圖像?？梢匀翱臻g里進(jìn)行切換，達(dá)到瀏覽各個(gè)不同場(chǎng)景360全景展示的目的。2015-03-03
jquery實(shí)現(xiàn)的超出屏幕時(shí)把固定層變?yōu)槎ㄎ粚拥拇a
相信很多人都上過(guò)taobao吧，在taobao的產(chǎn)品列表頁(yè)有一個(gè)浮動(dòng)的用來(lái)排序的浮動(dòng)層，當(dāng)你拖動(dòng)滾動(dòng)條而導(dǎo)致那個(gè)排序欄看不到的時(shí)候它會(huì)自動(dòng)變?yōu)楦?dòng)層，一直固定在那里。2010-02-02
jquery實(shí)現(xiàn)滑屏大圖定時(shí)收縮為小banner圖片的廣告代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)滑屏大圖定時(shí)收縮為小banner圖片的廣告代碼,可實(shí)現(xiàn)大幅廣告圖的漸顯效果及定時(shí)收縮功能,點(diǎn)擊左上角關(guān)閉按鈕還可隱藏廣告圖片,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-09-09
本文給大家分享基于jquery步驟進(jìn)度條源碼分享，實(shí)現(xiàn)功能是這樣的，在輸入框中輸入第3步，點(diǎn)擊重新生成按鈕，相應(yīng)的步驟顏色就會(huì)加深，對(duì)jquery步驟進(jìn)度條感興趣的朋友一起看看吧2015-11-11
jquery 刪除節(jié)點(diǎn) 添加節(jié)點(diǎn) 找兄弟節(jié)點(diǎn)的簡(jiǎn)單實(shí)現(xiàn)
下面小編就為大家?guī)?lái)一篇jquery 刪除節(jié)點(diǎn) 添加節(jié)點(diǎn) 找兄弟節(jié)點(diǎn)的簡(jiǎn)單實(shí)現(xiàn)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12
本文主要對(duì)jQuery選擇器進(jìn)行一一舉例介紹，有助于學(xué)習(xí)、理解和記憶。具有很好的參考價(jià)值，下面就跟著小編一起來(lái)看下吧2016-12-12
jquery 查找iframe父級(jí)頁(yè)面元素的實(shí)現(xiàn)代碼
jquery 查找iframe父級(jí)頁(yè)面元素的實(shí)現(xiàn)代碼，學(xué)習(xí)jquery的朋友可以參考下。2011-08-08
這個(gè)腳本是網(wǎng)上的代碼修改的，兼容各主流瀏覽器，優(yōu)化頁(yè)面異步加載的文字的檢索提示框定位，根據(jù)選擇文字位置與屏幕尺寸計(jì)算檢索提示框定位。2010-09-09