Firefox 下的渲染问题
Rendering issues under Firefox
在 Chrome 下是这样的,应该是这样的:
然而在 firefox 下它是这样的:
有人 link 有解释导航器及其修复程序之间差异的页面吗?
在此选择器中将 max-width: 70%
替换为 width: 70%
:
#miniMenu img { width: 70%; }
在 SO 上查看此 post 解释 Firefox 上最大宽度 属性 的问题:
Image mysteriously ignoring max-width in Firefox & IE
特别是来自@Boris Zbarsky 回答的这些行:
You have max-width: 100%, but 100% of what? Of the parent width,
right? But the parent is an inline-block (with class="sponsor") whose
width is not set, so its width depends on the children, and in
particular on the preferred width of the children.
The layout of this styling is undefined in the CSS specification. In
particular, the intrinsic width of the kids in this case depends on
the width of the parent which in turn depends on the intrinsic width
of the kids. See
http://www.w3.org/TR/CSS21/visudet.html#shrink-to-fit-float for the
relevant spec text and note all the "does not define" bits.
在 Chrome 下是这样的,应该是这样的:
然而在 firefox 下它是这样的:
有人 link 有解释导航器及其修复程序之间差异的页面吗?
在此选择器中将 max-width: 70%
替换为 width: 70%
:
#miniMenu img { width: 70%; }
在 SO 上查看此 post 解释 Firefox 上最大宽度 属性 的问题: Image mysteriously ignoring max-width in Firefox & IE
特别是来自@Boris Zbarsky 回答的这些行:
You have max-width: 100%, but 100% of what? Of the parent width, right? But the parent is an inline-block (with class="sponsor") whose width is not set, so its width depends on the children, and in particular on the preferred width of the children.
The layout of this styling is undefined in the CSS specification. In particular, the intrinsic width of the kids in this case depends on the width of the parent which in turn depends on the intrinsic width of the kids. See http://www.w3.org/TR/CSS21/visudet.html#shrink-to-fit-float for the relevant spec text and note all the "does not define" bits.