圖片在瀏覽器中底部對齊 解決方法之一
更新時間：2011年11月30日 23:43:08 作者：
需要在列表中顯示很多圖片，圖片高低不同，寬度都設(shè)置一樣了，要底部對齊
style="vertical-align:bottom;"不管用，上網(wǎng)搜索說要用js實現(xiàn)，找了個代碼，測試不成功，主要是代碼太多太亂沒法心情測試了。
于是就自己寫吧。
$(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)測試以下瀏覽器通過
IE6、 IE8、Chrome、 Opear、 FireFox、 QQ瀏覽器、 360、 傲游、 蘋果
百度之類IE內(nèi)核的就沒測了肯定能用。
期待更精簡代碼出現(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)測試以下瀏覽器通過
IE6、 IE8、Chrome、 Opear、 FireFox、 QQ瀏覽器、 360、 傲游、 蘋果
百度之類IE內(nèi)核的就沒測了肯定能用。
期待更精簡代碼出現(xiàn)。
相關(guān)文章
jQuery基礎(chǔ) -- 處理表單元素2010-02-02
jQuery實現(xiàn)動態(tài)添加標(biāo)簽事件
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)動態(tài)添加標(biāo)簽事件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
jQuery 實時保存頁面動態(tài)添加的數(shù)據(jù)的示例
本篇文章主要介紹了jQuery 實時保存頁面動態(tài)添加的數(shù)據(jù)的示例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
簡單過濾選擇器：根據(jù)某類過濾規(guī)則進行元素的匹配，書寫時都以冒號（：）開頭；簡單過濾選擇器是過濾選擇器中使用最廣泛的一種，感興趣的朋友可以參考下2013-04-04
最近再做價值中國微博，從用戶體驗的角度，將很多常用的window.alert或者window.confirm之類比較生硬死板冷不丁的提示改為彈出層的方式實現(xiàn)。2010-10-10
jQuery 1.9使用$.support替代$.browser的使用方法
jQuery 從 1.9 版開始，移除了 $.browser 和 $.browser.version ， 取而代之的是 $.support，下面我們來看下具體的使用方法2014-05-05
jquery checkbox 勾選的bug問題解決方案與分析
本文首先由一個在項目中遇到的jquery checkbox 勾選的bug的解決方案，引申出jQuery中attr()和prop()的差異分析，非常的實用，需要的小伙伴快來研究下吧2014-11-11
這篇文章主要介紹了使用jQuery實現(xiàn)自定義下拉列表的方法及代碼分享，效果非常不錯，兼容性也很棒，這里推薦給小伙伴們。2015-01-01
利用jquery和BootStrap實現(xiàn)動態(tài)滾動條效果
這篇文章主要介紹了利用jquery和BootStrap實現(xiàn)動態(tài)滾動條效果,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2018-12-12
關(guān)于動態(tài)生成dom綁定事件失效的原因及解決方法
下面小編就為大家?guī)硪黄P(guān)于動態(tài)生成dom綁定事件失效的原因及解決方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08