Tag: css3

在Firefox和Chrome 48中使用flexbox呈现问题: 在铬47（正确的行为）：在铬47，与.scroll div滚动正确，使用flex 100％高度。在Firefox（错误的行为）：在Firefox上，与.scroll该div使用内容的高度，而不是正确滚动。这个问题的跨浏览器解决scheme是什么？ http://jsfiddle.net/d4nkevee/ for (var i = 0; i < 100; i++) $(".scroll").append("Dynamic content<br>"); body, html { margin: 0; padding: 0; } .container { box-sizing: border-box; position: absolute; height: 100%; width: 100%; display: flex; flex-direction: column; } .content { background: yellow; flex: 1; display: flex; flex-direction: column; } .scroll { flex: 1 […]

如何validationCSS中的供应商前缀，如-webkit-和-moz-？: 我使用webkit / mozilla边框半径和框阴影CSS属性，但我想CSSvalidation（目前没有）。有没有办法让它validation？ http://jigsaw.w3.org/css-validator/

用CSS3animation改变背景图像: 为什么这不起作用？我究竟做错了什么？ CSS @-webkit-keyframes test { 0% { background-image: url('frame-01.png'); } 20% { background-image: url('frame-02.png'); } 40% { background-image: url('frame-03.png'); } 60% { background-image: url('frame-04.png'); } 80% { background-image: url('frame-05.png'); } 100% { background-image: url('frame-06.png'); } } div { float: left; width: 200px; height: 200px; -webkit-animation-name: test; -webkit-animation-duration: 10s; -webkit-animation-iteration-count: 2; -webkit-animation-direction: alternate; -webkit-animation-timing-function: linear; […]

文本溢出省略号在左侧: 我有一个path列表（因为缺less一个更好的词，也许面包屑跟踪描述他们更好）。其中一些值太长，无法在其父项中显示，所以我正在使用text-overflow: ellipsis 。问题是重要的信息在右边，所以我想省略号出现在左边。像这样的ascii艺术： —————————- |first > second > third | |…second > third > fourth| |…fifth > sixth > seventh| —————————- 请注意，第一行是足够短的，所以它保持左alignment，但另外两个太长，所以省略号出现在左侧。我更喜欢一个CSS唯一的解决scheme，但JS是好的，如果它无法避免。如果该解决scheme只适用于Firefox和Chrome，则可以。编辑：在这一点上，我正在寻找一种解决scheme，以防止在文档混合RTL和LTR时正确呈现的Chrome中的错误。从一开始我就是这么想的，我只是没有意识到这一点。

填充和边界框中的flex-shrink因子如何？: 假设我们有一个宽度为400px的flex容器。这个容器里面有三个弹性项目： :nth-child(1) { flex: 0 2 300px; } /* flex-grow, flex-shrink, flex-basis */ :nth-child(2) { flex: 0 1 200px; } :nth-child(3) { flex: 0 2 100px; } 所以Flex项目的总宽度是600px，容器中的可用空间是-200px。在这个问题的帮助下，本文以及flexbox规范中，我学到了在flex项目中分配负空闲空间的基本公式：步骤1 将每个缩小值乘以其基础并将它们相加： :nth-child(1) 2 * 300 = 600 :nth-child(2) 1 * 200 = 200 :nth-child(3) 2 * 100 = 200 总计= 1000 第2步 […]

ie9边界半径: 我有以下在Firefox，Chrome和Safari的作品。但不是在IE9中。它将圆angular应用到td的左上angular和右侧。我错过了什么？ border-left: solid 1px #444f82; border-right:solid 1px #444f82; border-top:solid 1px #444f82; border-top-right-radius: 7px; border-top-left-radius: 7px; -moz-border-radius-topright: 7px; -webkit-border-top-right-radius: 7px; -khtml-border-radius-topright: 7px; -moz-border-radius-topleft: 7px; -webkit-border-top-left-radius: 7px; -khtml-border-radius-topleft: 7px; behavior: url(/survey_templates/PIE.htc);

CSS3跨浏览器线性渐变: 以下代码将会是Opera和IE的替代品吗？ background-image: -webkit-gradient(linear, right top, left bottom, from(#0C93C0), to(#FFF)); background-image: -moz-linear-gradient(right, #0C93C0, #FFF); 请注意，我testing了以下规则。所有的浏览器都支持它们。但他们是垂直渐变。任何人都可以帮我修改他们水平的？ background-image: -webkit-linear-gradient(top, #0C93C0, #FFF); background-image: -moz-linear-gradient(top, #0C93C0, #FFF); background-image: -ms-linear-gradient(top, #0C93C0, #FFF); background-image: -o-linear-gradient(top, #0C93C0, #FFF); background-image: linear-gradient(top, #0C93C0, #FFF);

Flexbox和垂直滚动使用NEWER flexbox api的全高应用程序: 我想要使用flexbox的全高应用程序。我在这个链接中find了我想要使用旧的flexbox（display：box;以及其他东西）： CSS3 Flexbox全高应用程序和溢出这是旧版本的flexbox css属性的正确解决scheme。如果我想尝试使用较新的Flexbox属性，我将尝试在同一个链接中使用第二个解决scheme，但使用高度为0px的容器 “hacking”flexbox ; 它使显示一个垂直滚动。我不喜欢它很多，因为它引入了其他问题，它比解决scheme更像一个工作环境。我已经准备了一个基础示例jsfiddle： http : //jsfiddle.net/ch7n6/ #container { display: -webkit-flex; -webkit-flex-direction: column; height: 100%; } #container article { -webkit-flex: 1 1 auto; overflow-y: scroll; } 这是一个“全高HTML网页”，由于内容元素的弹性框，页脚处于底部。我build议你移动CSS代码和结果之间的酒吧来模拟不同的高度。

CSS中心显示内嵌块？: 我有一个工作代码在这里： http : //jsfiddle.net/WVm5d/ （你可能需要使结果窗口更大，看看alignment中心效应）题代码工作正常，但我不喜欢有display: table; 。这是我能制作包装类alignment中心的唯一方法。我认为这会更好，如果有一种方法来使用display: block; 或者display: inline-block; 。是否有可能以另一种方式解决alignment中心问题？添加一个固定的容器是不是我的select。如果JS Fiddle链接在将来被破坏，我也会在这里粘贴我的代码： HTML <div class="wrap"> <div class="sidebar"> Sidebar </div> <div class="container"> <div class="box"> Height1 </div> <div class="box"> Height2<br /> Height2 </div> <div class="box"> Height3<br /> Height3<br /> Height3 </div> <div class="box"> Height1 </div> <div class="box"> Height2<br /> Height2 […]

CSS3旋转animation: <img class="image" src="" alt="" width="120" height="120"> 不能让这个animation图像工作，它应该做一个360度旋转。我想下面的CSS有些问题，因为它只是保持不动。 .image { float: left; margin: 0 auto; position: absolute; top: 50%; left: 50%; width: 120px; height: 120px; margin-top: -60px; margin-left: -60px; -webkit-animation-name: spin; -webkit-animation-duration: 4000ms; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: spin; -moz-animation-duration: 4000ms; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: spin; -ms-animation-duration: 4000ms; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; animation-name: spin; […]