css – 图像神秘忽略Firefox和IE中的最大宽度

前端之家收集整理的这篇文章主要介绍了css – 图像神秘忽略Firefox和IE中的最大宽度前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
所以我试图显示图像尽可能大,没有裁剪任何屏幕尺寸。这意味着身高:100%; width:auto in landscape and width:100%; height:自动纵向。

我提供的图像,足够大,以填补视网膜iPad,所以几乎每个屏幕尺寸将缩放图像。它在每个浏览器和方向,除了Internet Explorer& Firefox在横向模式,让它们太大,几乎每个屏幕。这只是在景观,记住你。

代码的相关位为:

  1. <style type="text/css">
  2.  
  3. #container {position:absolute; top:0; left: 0; right: 0; bottom:0; display: block;}
  4.  
  5. #content {
  6. text-align: center;
  7. margin: 0px;
  8. font-size:0;
  9. position: absolute;
  10. top:0; left: 0; right: 0; bottom: 0
  11. }
  12.  
  13. #content:before {
  14. content: '';
  15. display: inline-block;
  16. height: 100%;
  17. vertical-align: middle;
  18. margin-right: -0.25em;
  19. }
  20.  
  21. .sponsor {
  22. display: inline-block;
  23. vertical-align: middle;
  24. }
  25.  
  26. #content img {
  27. max-width: 100%;
  28. width: 100%;
  29. height:auto;
  30. }
  31. @media all and (orientation: landscape) {
  32. #main {
  33. top:0;
  34. display: block;
  35. width: 100%;
  36. height: 100%;
  37. margin:0px auto;
  38. text-align:center;
  39. }
  40.  
  41. #content img {
  42. height:100%;
  43. width:auto;
  44. max-width:auto !important;
  45. max-height:100%;
  46. display:block;
  47. margin:0 auto;
  48. }
  49.  
  50. }
  51. </style>
  52.  
  53. <div id="content">
  54. <?PHP if (has_post_thumbnail( $post->ID ) ): ?>
  55. <?PHP $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ),'single-post-thumbnail' ); ?>
  56. <div title="Click to flip" class="sponsor">
  57.  
  58. <a href="#" class="img-link">
  59. <img src="<?PHP echo $image[0]; ?>" alt="" class="feat-1" style="display: block;" />
  60. </a>
  61.  
  62. <a href="#">
  63. <img src="<?PHP echo kd_mfi_get_featured_image_url('featured-image-2','post','full'); ?>" alt="" class="feat-2" style="display: none;" />
  64. </a>
  65.  
  66. </div><?PHP endif; ?>
  67. </div><!-- End div #content -->

我不太喜欢比老IE9,但理想的是想服务一切。然而,只要我可以服务IE9& Firefox我会很高兴。

哦,顺便说一下 – Firefox中的检查器告诉我,宽度:100%的规则是遵循,但显然不是。

提前谢谢了!

解决方法

你有最大宽度:100%,但100%的什么?在父宽度,对吧?但是父类是一个内联块(with class =“sponsor”),其宽度未设置,因此其宽度取决于子项,特别是子项的首选宽度。

CSS样式中的布局在CSS规范中未定义。特别地,在这种情况下,孩子的内在宽度取决于父母的宽度,父母的宽度又取决于孩子的内在宽度。有关规范文本请参见http://www.w3.org/TR/CSS21/visudet.html#shrink-to-fit-float,并注意所有“不定义”位。

我建议你给你的< div class =“sponsor”>宽度。这应该处理的问题,我会想。

猜你在找的CSS相关文章