Tag: css3

如何在CSS中应用多个转换？: 使用CSS，我怎样才能应用多个transform ？例如：在下面，只应用翻译，而不是旋转。 li:nth-child(2) { transform: rotate(15deg); transform: translate(-20px,0px); }

为什么IE9在我的网站上切换到兼容模式？: 我刚安装IE9testing版，并在我创build的特定网站（HTML5）IE9跳转到兼容模式，除非我手动告诉它不要。我试图删除网站的几个部分，但没有改变。包括删除所有的CSS包括。在我的一些其他网站上，它很好。此外，不要手动设置，因为那么IE9记得用户设置，你不能把它回到自动（或至less我还没有find如何，甚至没有通过私人浏览和清空caching）无论如何。跳转到兼容模式的网站： http : //alliancesatwar.com/guide/ 一个它呈现正确的地方： http : //geuze.name/basement/ （我不能超过1超链接）两者都使用相同的doctype和所有。这些网站使用相同的基本模板（编码，元标记，文档types和相同的JavaScript）有很多共同点（除外观）如果有人有我的答案，这将是非常好的！在IE7模式下呈现的HTML5网站非常糟糕。

自举中的垂直alignment中心4: 我正在尝试使用Bootstrap 4将我的容器居中放置在页面中间。到目前为止，我一直没有成功。任何帮助，将不胜感激。我已经在Codepen.io上build立起来了，所以你们可以用它玩，让我知道什么是有用的，因为我的想法是… 编辑 – [已解决] 将以下内容添加到我的CSS的顶部解决了问题： html, body { height:100%; } body { display:flex; align-items:center; } 另外，在Bootstrap 4（alpha）中：将类d-flex align-items-center h100到父级也解决了这个问题，并且是更加Bootstappy方法。注意这和前面提到的方法是一样的。解决了@Pete，@ZimSystems以及其他

我如何正常化跨浏览器的CSS3转换function？: Webkit的转换结束事件叫做webkitTransitionEnd，Firefox是transitionEnd，opera是oTransitionEnd。在纯JS中处理所有这些问题的好方法是什么？我应该做浏览器嗅探吗？或分别实施每一个？还有一些没有发生在我身上的方式？即： //doing browser sniffing var transitionend = (isSafari) ? "webkitTransitionEnd" : (isFirefox) ? "transitionEnd" : (isOpera) ? "oTransitionEnd"; element.addEventListener(transitionend, function(){ //do whatever },false); 要么 //asigning an event listener per browser element.addEventListener(webkitTransitionEnd, function(){callfunction()},false); element.addEventListener(oTransitionEnd, function(){callfunction()},false); element.addEventListener(transitionEnd, function(){callfunction()},false); function callfunction() { //do whatever }

使用display的好处：inline-block vs float：留在CSS中: 通常情况下，当我们想在一行中有多个DIVs ，我们可以使用float: left ，但现在我发现了display:inline-block 示例链接在这里。在我看来， display:inline-block是连续align DIVs的更好方法，但是有什么缺点吗？为什么这种方法比float技巧更不受欢迎？

CSS文本溢出：省略号; 不工作？: 我不知道为什么这个简单的CSS不工作… CSS： .app a { height: 18px; width: 140px; padding: 0; overflow: hidden; position: relative; margin: 0 5px 0 5px; font: bold 15px/18px Arial; text-align: center; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; color: #FFF; } HTML： <div class="app"> <img src=""></img> <h1></h1> <a href=""></a> </div>

将文本居中放置在柔性盒中的图像上: 我怎样才能居中alignment文本<img>最好使用FlexBox？ body { margin: 0px; } .height-100vh { height: 100vh; } .center-aligned { display: box; display: flex; box-align: center; align-items: center; box-pack: center; justify-content: center; } .background-image { position: relative; } .text { position: absolute; } <section class="height-100vh center-aligned"> <img class="background-image" src="http://vignette2.wikia.nocookie.net/uncyclopediahttp://img.dovov.comf/f8/Stand-out-in-the-crowd-300×300.jpg" /> <div class="text">SOME TEXT</div> </section>

CSS：选定的伪类似于：checked，但是用于<select>元素: 有没有一种方法来设置<select>元素中当前选定的<option>元素的样式？然后，我可以给当前选定的选项元素一个背景颜色？这样，我可以在closures的下拉菜单中select当前可查看的选项。

我怎样才能用CSS跨浏览器绘制垂直文本？: 我想通过跨浏览器（> = IE6，> = Firefox 2，任何版本的Chrome，Safari或Opera）将单个文本字旋转90度。如何才能做到这一点？

我应该在我的CSS中使用px或rem值单位吗？: 我正在devise一个新的网站，我希望它尽可能多的浏览器和浏览器设置兼容。我正在尝试确定我应该使用的字体和元素大小的度量单位，但无法find确凿的答案。我的问题是：我应该在我的CSS中使用px还是rem ？到目前为止，我知道使用px与在浏览器中调整基本字体大小的用户不兼容。我忽略了em因为他们更容易维护，相比之下，他们的级联。有人说， rem是独立的分辨率，因此更可取。但也有人说大多数现代浏览器无论如何都放大了所有元素，所以使用px不是问题。我这样问是因为对于CSS中距离最合适的衡量标准有很多不同的观点，我不确定哪个是最好的。