此脚本检查所有具有 .fixMinMaxwidth 类的元素并观察窗口。它仅应用于不支持原生 min/max-width 的浏览器,例如 IE6 及以下版本。窗口调整大小也不会成为问题。
<script type="text/javascript">
//anonymous function to check all elements with class .fixMinMaxwidth
var fixMinMaxwidth=function()
{
//only apply this fix to browsers without native support
if (typeof document.body.style.maxHeight !== "undefined" &&
typeof document.body.style.minHeight !== "undefined") return false;
//loop through all elements
$('.fixMinMaxwidth').each(function()
{
//get max and minwidth via jquery
var maxWidth = parseInt($(this).css("max-width"));
var minWidth = parseInt($(this).css("min-width"));
//if min-/maxwidth is set, apply the script
if (maxWidth>0 && $(this).width()>maxWidth) {
$(this).width(maxWidth);
} else if (minWidth>0 && $(this).width()<minWidth) {
$(this).width(minWidth);
}
});
}
//initialize on domready
$(document).ready(function()
{
fixMinMaxwidth();
});
//check after every resize
$(window).bind("resize", function()
{
fixMinMaxwidth();
});
</script>
嗯……当我尝试实现它时,IE6 无法解析 maxWidth 和 minWidth 值。现代浏览器可以正确解释它们。您是否已成功使用过此功能?
我弄明白了。我正在所有图像上使用 max-width: 100% 的全局样式。由于 IE6 相对图像大小而不是父元素计算该百分比,因此效果失败了。我将 maxWidth 设置为每个图像父元素的宽度,而不是 CSS 中的显式 100%,这似乎可以解决问题。不太确定如何处理 min-width。或者,针对所有可能的 max-width 的一组 IE6 特定 CSS 将与现有代码一起使用,但很快就会变得难以管理。
我认为 这个 是相同想法的更优雅的解决方案,并且可以追溯到 IE6。它专为具有最小值的全屏 Flash 设计,但概念也可以在没有 Flash 的情况下应用。(尽管它不是为最大值设计的,只是最小值)