首页 文章

是否有“width：-moz-fit-content;”的css跨浏览器值？

提问于
浏览 次
50

我需要一些div同时 center-positioned 和 fit their content width .

我现在这样做：

.mydiv-centerer{

  text-align: center;

  .mydiv {
    background: none no-repeat scroll 0 0 rgba(1, 56, 110, 0.7);
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 5px #0099FF;
    color: white;
    margin: 10px auto;
    padding: 10px;
    text-align: justify;
    width: -moz-fit-content;
  }
}

现在，最后一个命令"width: -moz-fit-content;"是 exactly 我需要的东西！

唯一的问题是..它只适用于Firefox .

我也试过"display:inline-block;"，但是我需要这些div来表现得像div一样 . 也就是说，每个下一个div应该是 under ，而不是之前的 inline .

你知道任何可能的跨浏览器解决方案吗？

css firefox css3 cross-browser

6 回答

  • 6

    最后我简单地使用以下方法修复它：

    display: table;
    回复于
  • 42

    Mozilla的MDN建议如下[source]：

    p {
  width: intrinsic;           /* Safari/WebKit uses a non-standard name */
  width: -moz-max-content;    /* Firefox/Gecko */
  width: -webkit-max-content; /* Chrome */
}
    回复于
  • 0

    是否有一个声明可以修复Webkit，Gecko和Blink？不可以 . 但是，通过指定与每个布局引擎的约定相对应的多个宽度属性值，存在跨浏览器解决方案 .

    .mydiv {  
  ...
  width: intrinsic;           /* Safari/WebKit uses a non-standard name */
  width: -moz-max-content;    /* Firefox/Gecko */
  width: -webkit-max-content; /* Chrome */
  ...
}

    改编自：MDN

    回复于
  • 94

    在我使用过的类似情况中： white-space: nowrap;

    回复于
  • 4

    为什么不使用一些 br ？

    <div class="mydiv-centerer">
    <div class="mydiv">Some content</div>
    
    <div class="mydiv">More content than before</div>
    
    <div class="mydiv">Here is a lot of content that
                       I was not anticipating</div>    
</div>

    CSS

    .mydiv-centerer{
    text-align: center;
}

.mydiv{
    background: none no-repeat scroll 0 0 rgba(1, 56, 110, 0.7);
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 5px #0099FF;
    color: white;
    margin: 10px auto;
    padding: 10px;
    text-align: justify;
    display:inline-block;
}

    Example: http://jsfiddle.net/YZV25/

    回复于
  • 1

    我用这些：

    .right {display:table; margin:-18px 0 0 auto;}
.center {display:table; margin:-18px auto 0 auto;}
    回复于

相关问题