小编bon*_*ash的帖子

假设我们有一个容器,其子容器必须用列填充它.容器的高度有限,并且必须与所有后代适合的宽/窄一样宽.它应该如下所示:

为了做到这一点,我试试flexbox.问题是:它是否有可能缩小适合？

• float:left:在Chrome中根本没有做到这一点,在Firefox中,容器的宽度只有一列 - 例如1
• position:absolute:它对正常流量没有贡献,所以放弃它.

目前我将浏览器范围缩小到Chrome和FF.

HTML:

<div class="flexcontainer wrap column">
    <div></div>
    <div></div>
    ...
</div>

CSS:

.flexcontainer{
    display: flex;              /* make it a flexbox */
    flex-flow: column wrap;     /* make it a column container, and fill them one after another */

    align-content: stretch;
    align-items: center;
    justify-content: center;

    float: left;                /* shrink-to-fit */

    max-height: 450px;          /* limit the height */
    min-height: 300px;
}
.flexcontainer > div {
    height: 100px;            
    margin: 3px;
    width: 100px;               /* set the …

我需要在一些元素上实现"房间"三维旋转; 实现它transform: translateX(-100%) rotateY(90deg)并使用其相反的过渡.它在Chrome中运行良好,但在Firefox(最高版本为34)中,元素在转换过程中会闪烁.他们可以暂时这样做,已经走了一半,或完全消失.

我注意到的是:如果perspective父级的CSS值高于所讨论元素的计算宽度 - 过渡进展顺利.如果观点真的是罪魁祸首,那么我不理解这种行为的本质; 规范说,如果所有点的 Z轴值低于透视值,则不绘制元素.在过渡期间,至少应该至少部分可见.

应该注意的是,只有rotateY似乎有问题 - 而不是rorateX.

这是代码示例.html:

<div class="cont">
    <div id="bg-club" class="background club"></div>
    <div id="bg-cafe" class="background cafe active"></div>
    <div id="bg-fitness" class="background fitness"></div>
    <div id="bg-resto" class="background resto"></div>
    <div id="bg-lady" class="background lady"></div>
</div>

CSS(为方便起见,删除了前缀规则):

 .cont{
      position:absolute;
      top:0;
      right:0;
      bottom:0;
      left:0;
      z-index:1;
      overflow:hidden;

      perspective:1000px;
      transform-style:preserve-3d;
 }
 .background.active{
      visibility:visible;
      z-index:1;
 }
 .background{
      position:absolute;
      top:50px;
      right:50px;
      bottom:50px;
      left:50px;
      z-index:10;

      backface-visibility: hidden; 
      transform: translate3d(0, 0, 0);
      transform-style: preserve-3d; 

      visibility:hidden;
      overflow:hidden;

      background-repeat:no-repeat;
      background-position:center center; …

在这个问题中 - 如果工作人员和社区不介意 - 我想解决不同浏览器的两个不同的错误,虽然在相同条件下出现.

当一个元素display:inline(和a box-shadow,但这里设置更多用于演示目的)得到opacity小于1 时,就会发生错误.然后

1. IE 10(至少)将盒子阴影切断,就像设置了"overflow:hidden"一样.
2. Opera 12.15仅在文本的第一行留下框阴影.

用于演示此问题的HTML:

<span class="inline opaque">
    <span>Some text.</span>
</span>

CSS:

.inline{
    display:inline;
    background:red;
    box-shadow:0 0 0 10px red;
}
.inline.opaque{
    opacity:.5;
}

一个现实的例子.我对这种情况感到非常沮丧.对我来说似乎很奇怪和不自然.非常感谢任何帮助.

谢谢!

更新.似乎我找到了IE的一些解决方法.事实证明,我们可以将它box-shadow移到左边和顶部(它没有在这个bug中裁剪的方向).并且为了使元素在视觉上占据相同的空间,transform可以应用a.这里更好看

@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){
    .block{
        -ms-transform:translate(5px, 5px);
        transform:translate(5px, 5px);
    }
    .inline{
        box-shadow:-5px -5px 0 5px #c0c;
    }
}

注意,我们需要移动(可能还有translate)内容.inline.

最后的问题可能很愚蠢，但是...

我在Win 7环境中有一个本地GIT存储库，在Windows命令行中使用GIT。所有文件均采用UTF-8（无BOM），文本包含非ASCII符号（德语，俄语等），因此提交消息也是如此。有时我需要从过去的提交中调出一些数据，这些数据是非ASCII符号。但是gitk和git都git checkout <commit-hash>以非UTF-8编码（根据Notepad ++为默认ANSI）显示文件，当然会打破仅UTF-8的符号。退回HEAD即可恢复文件的编码。

我想念什么吗？也许需要进行一些GIT设置。我的猜测是git文件不是UTF-8，因此不能包含此类符号。

我也有提到非ASCII提交信息做工精细（git log和gitk他们正确地显示，虽然我并没有改变CMD endoding）。

谢谢！

编辑：这是我的文件在gitk中或签出时的外观（注意注释行中的字符）：

@import 'reset';
@import 'mixins';
@import 'animations';
@import 'variables';
@import 'helpers';

/* ==================== ???????„?‚?‹ ==================== */
@font-face{
    font-family:'ClearSans';
    src:url('../fonts/ClearSans-Medium.eot');
    src:url('../fonts/ClearSans-Medium.eot?#iefix') format('embedded-opentype'),
         url('../fonts/ClearSans-Medium.woff') format('woff'),
         url('../fonts/ClearSans-Medium.ttf') format('truetype'),
         url('../fonts/ClearSans-Medium.svg') format('svg');
    font-weight:normal;
    font-style:normal;
}