Css 图像在Firefox中神秘地忽略了最大宽度&；即

因此，我试图显示尽可能大的图像，而不在任何屏幕大小上进行裁剪。这意味着

高度：100%；宽度：自动

在

横向

和

宽度：100%；高度：在
纵向中自动

我提供的图像足够大，足以填满视网膜iPad，所以几乎每个屏幕大小都会缩小图像。除了在横向模式下的InternetExplorer和Firefox之外，它在每个浏览器和方向上都做得很好，这使得它们对于几乎每个屏幕来说都太大了。请注意，这只是风景

相关代码位为：

<style type="text/css">

            #container {position:absolute; top:0; left: 0; right: 0; bottom:0; display: block;}

            #content {
              text-align: center;
              margin: 0px;
                font-size:0;
                 position: absolute;
                top:0; left: 0; right: 0; bottom: 0
            }

            #content:before {
              content: '';
              display: inline-block;
              height: 100%; 
              vertical-align: middle;
              margin-right: -0.25em; 
             }

            .sponsor {
              display: inline-block;
              vertical-align: middle;
             }

             #content img {
                max-width: 100%;
                width: 100%;
                height:auto;
            } 
@media all and (orientation: landscape) {
                 #main {        
                    top:0;
                    display: block;  
                    width: 100%;
                    height: 100%;                       
                    margin:0px auto; 
                    text-align:center;
                     }

                    #content img {
                                height:100%;
                                width:auto;
                                max-width:auto !important;
                                max-height:100%;
                                display:block;
                                margin:0 auto;
                }

}
</style>

<div  id="content"> 
 <?php if (has_post_thumbnail( $post->ID ) ): ?>
 <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>              
         <div title="Click to flip" class="sponsor">

                 <a href="#" class="img-link"> 
                        <img src="<?php echo $image[0]; ?>" alt="" class="feat-1" style="display: block;" />
                    </a>

                     <a href="#"> 
                      <img src="<?php echo kd_mfi_get_featured_image_url('featured-image-2', 'post', 'full'); ?>" alt="" class="feat-2" style="display: none;" />
                    </a>

            </div><?php endif; ?>
</div><!-- End div #content -->


#容器{位置：绝对；顶部：0；左侧：0；右侧：0；底部：0；显示：块；}
#内容{
文本对齐：居中；
边际：0px；
字号：0；
位置：绝对位置；
顶部：0；左侧：0；右侧：0；底部：0
}
#内容：以前{
内容：''；
显示：内联块；
身高：100%；
垂直对齐：中间对齐；
保证金权利：-0.25em；
}
.赞助商{
显示：内联块；
垂直对齐：中间对齐；
}
#内容img{
最大宽度：100%；
宽度：100%；
高度：自动；
} 
@媒体和所有（方向：横向）{
#主{
排名：0；
显示：块；
宽度：100%；
身高：100%；
保证金：0px自动；
文本对齐：居中；
}
#内容img{
身高：100%；
宽度：自动；
最大宽度：自动！重要；
最大高度：100%；
显示：块；
保证金：0自动；
}
}

我不太在意比IE9更老的版本，但理想情况下，我愿意为一切服务。不过，只要我能为IE9+和Firefox服务，我就会很高兴

哦，顺便说一句，Firefox中的Inspector告诉我，
width:100%
规则得到了遵守，但显然没有

非常感谢
 您有
最大宽度：100%
，但100%是什么？父级宽度的，对吗？但是父块是一个内联块（带有class=“shandor”），其宽度未设置，因此其宽度取决于子块，特别是子块的首选宽度

CSS规范中未定义此样式的布局。特别是，在这种情况下，孩子的固有宽度取决于父母的宽度，而父母的宽度又取决于孩子的固有宽度。有关规范文本，请参见，并注意所有“未定义”位

我建议给你的
一个宽度。我想这应该可以解决这个问题。
我的解决方案是双重的。它在没有其他建议的情况下起作用。它仅对FF使用定位，较旧的
宽度：100%
修复，以及一个附加的实验属性

为了让它发挥作用，我做了以下工作：

@-moz-document url-prefix() {
    /* Firefox doesn't respect max-width in certain situations */
    img { width: 100%; max-width: -moz-max-content; }
}

神奇的子弹是实验性的
-moz最大含量
值。结合
width:100%
，它使FF表现得像Safari/Chrome的
max width:100%设置

我从以下来源发现了这一点：

啊！是的，给
一个宽度就解决了它。我真的很惊讶Chrome&Safari从祖父母那里拿走了宽度，但IE&Firefox没有。非常感谢！Chrome和Safari沿着替换元素的最大宽度百分比线做一些事情，给它一个零最小固有宽度，然后内联块上的收缩包裹算法给它一个等于父元素的宽度。至少就我所知，这就是WebKit在这个案例中所做的。也解决了我的问题。谢谢这个建议也解决了我的问题。在我的例子中，父对象是一个锚定标记，因此我的结构是
div.class>a>img
，我的css基本上是
.class img:{max width:100%；}
。我通过说
.class a:{max width:100%；}
解决了我的问题。在我看来，在这种情况下（max width:100%），它应该表现为页面中没有图像，然后使图像成为它所在元素的宽度。对我来说，这就是它在语义上的含义，也是safari、chrome和ie edge的表现