圖片在瀏覽器中底部對(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è)試了。
于是就自己寫吧。
$(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) {//如果是蘋果或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、 傲游、 蘋果
百度之類IE內(nèi)核的就沒(méi)測(cè)了肯定能用。
期待更精簡(jiǎn)代碼出現(xiàn)。
于是就自己寫吧。
復(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) {//如果是蘋果或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、 傲游、 蘋果
百度之類IE內(nèi)核的就沒(méi)測(cè)了肯定能用。
期待更精簡(jiǎn)代碼出現(xiàn)。
相關(guān)文章
jQuery基礎(chǔ) -- 處理表單元素2010-02-02
jQuery實(shí)現(xiàn)動(dòng)態(tài)添加標(biāo)簽事件
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)動(dòng)態(tài)添加標(biāo)簽事件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
jQuery 實(shí)時(shí)保存頁(yè)面動(dòng)態(tài)添加的數(shù)據(jù)的示例
本篇文章主要介紹了jQuery 實(shí)時(shí)保存頁(yè)面動(dòng)態(tài)添加的數(shù)據(jù)的示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
簡(jiǎn)單過(guò)濾選擇器：根據(jù)某類過(guò)濾規(guī)則進(jìn)行元素的匹配，書寫時(shí)都以冒號(hào)（：）開(kāi)頭；簡(jiǎn)單過(guò)濾選擇器是過(guò)濾選擇器中使用最廣泛的一種，感興趣的朋友可以參考下2013-04-04
自制輕量級(jí)仿jQuery.boxy對(duì)話框插件代碼
最近再做價(jià)值中國(guó)微博，從用戶體驗(yàn)的角度，將很多常用的window.alert或者window.confirm之類比較生硬死板冷不丁的提示改為彈出層的方式實(shí)現(xiàn)。2010-10-10
jQuery 1.9使用$.support替代$.browser的使用方法
jQuery 從 1.9 版開(kāi)始，移除了 $.browser 和 $.browser.version ， 取而代之的是 $.support，下面我們來(lái)看下具體的使用方法2014-05-05
jquery checkbox 勾選的bug問(wèn)題解決方案與分析
本文首先由一個(gè)在項(xiàng)目中遇到的jquery checkbox 勾選的bug的解決方案，引申出jQuery中attr()和prop()的差異分析，非常的實(shí)用，需要的小伙伴快來(lái)研究下吧2014-11-11
這篇文章主要介紹了使用jQuery實(shí)現(xiàn)自定義下拉列表的方法及代碼分享，效果非常不錯(cuò)，兼容性也很棒，這里推薦給小伙伴們。2015-01-01
利用jquery和BootStrap實(shí)現(xiàn)動(dòng)態(tài)滾動(dòng)條效果
這篇文章主要介紹了利用jquery和BootStrap實(shí)現(xiàn)動(dòng)態(tài)滾動(dòng)條效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-12-12
關(guān)于動(dòng)態(tài)生成dom綁定事件失效的原因及解決方法
下面小編就為大家?guī)?lái)一篇關(guān)于動(dòng)態(tài)生成dom綁定事件失效的原因及解決方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08