Tag: css3

Flexbox项目之间的间距: 这就是我要的：我得到的最近在Flexbox项目上应用边距，然后从第一个和最后一个子项中删除一半。问题是:first-child并不总是第一个可见的，因为我可能会改变布局的顺序（例子）。在应用边距时，有没有办法将视觉顺序考虑在内？

带固定标题的仅CSS滚动表: 我有一个解决scheme，我可以使用小jQuery和CSS创build带有固定页眉/页脚的可滚动表格 – 但是我正在寻找一种方法，使其成为一个跨浏览器兼容的CSS解决scheme。要清楚的是，我正在试图做的只是使用一个table标记（它是有效的子标记， colgroup ， col ， thead ， tbody ， tfoot ， tr ， th ， td ），但是采用一组CSS规则符合以下条件：必须保持页眉/页脚/内容行之间的列alignment 当内容垂直滚动时，必须允许页眉/页脚保持固定不能要求任何jQuery或其他JavaScript来提供function 只能使用上面提供的标签这个代码示例： http : //jsfiddle.net/TroyAlford/SNKfd/显示我目前的做法。大多数的JS只是随机的值填充表，但最后一部分驱动左/右滚动性。 $tbody.bind('scroll', function(ev) { var $css = { 'left': -ev.target.scrollLeft }; $thead.css($css); $tfoot.css($css); }); 注：所提供的示例在IE中不能正确呈现，并要求jQuery提供水平滚动。无论如何，我并不关心水平滚动，所以如果一个解决scheme不这样做就没关系。

HTML＆CSS + Twitter Bootstrap：全页面布局或高度100％ – Npx: 我试图做出以下布局： +————————————————-+ | Header + search (Twitter navbar) | +————+————————————+ | | | | | | |Navigation | Content column | | | | | | | | | | | | | | | | | | | +————+————————————+ | Footer | +————————————————-+ 布局必须采取所有可用的高度和宽度，导航和内容列采取所有可用的空间和滚动溢出，页脚应坚持底部。 HTML看起来像这样： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> […]

Firefox -moz-border-radius不会裁剪出图像？: 有没有人知道如何设置图像的边框半径让Firefox的angular落？它包含元素将正常工作，但我得到丑陋的angular落伸出。任何方式来解决这个问题，而不把图像设置为背景图像或处理它之前，我把它放在我的网站上？

CSS绝对中心: 最近我遇到了这种方法，用于定位元素水平和垂直的中心。然而，我无法弄清楚每一个财产正在做什么。有人能够向我解释什么是设置top:0, bottom:0, left:0, right:0的影响top:0, bottom:0, left:0, right:0 ？（如果你能够用外行人的名词来解释它，或者提供一个说明性的图像，那将是非常棒的。）另外，将显示器设置为表格有什么用处？ .absolute-center { position: absolute; display: table; height: auto; width: 500px; margin: auto; top: 0; bottom: 0; right: 0; left: 0; border: solid 1px red; } <p class="absolute-center">What is this sorcery?</p>

如何在一个媒体查询中定位iPhone 3GS和iPhone 4？: 我正在尝试为iPad / iPhone和较旧的iPhone执行备用布局。我已经确定最好的方法是使用CSS3规范中的@media 。因此，这些是我的媒体在一分钟的疑问： @media screen and (max-width: 1000px) { … } 以上是针对小型桌面和笔记本电脑的屏幕 @media screen and (max-width: 700px) { … } 以上是iPad和非常小的台式机/笔记本电脑屏幕。 @media screen and (max-device-width: 480px) { … } 以上是针对iPhone 3GS和移动设备的一般情况。然而，带有史蒂夫·乔布斯（Steve Jobs）所有全能歌舞表演的“视网膜”显示屏的新款iPhone 4意味着它的像素比例为2-1，这意味着浏览器实际上出现了1像素为2×2像素的分辨率（960×640）触发iPad布局，而不是移动设备布局），所以这需要另外的媒体查询（目前只支持webkit）： @media screen and (-webkit-min-device-pixel-ratio: 2) { … } 现在，事情是…我想我的shiny的新的iPhone 4布局合并与iPhone 3GS和移动设备布局，因为他们将有完全相同的内部CSS代码，因此提出我的问题; 如何创build@media规则，将iPhone 4，3GS和其他手机指向相同的样式？

颠倒使用CSS的颜色: HTML <div> <p>inverted color</p> </div> CSS div { background-color: #f00; } p { color: /* how to use inverted color here in relation with div background ? */ } 有没有办法用css反转p颜色？有color: transparent; 为什么不是color: invert; 即使在CSS3？

把文本放在div的底部: 我有4个DIV紧挨着对方，它们都集中在屏幕中间。我在每个div中都有两个单词，但是我不希望他们在顶部，我希望他们出现在div的右下angular。我怎样才能做到这一点？

在IE7 / 8中模拟CSS3 border-radius和box-shadow: 我正在为一个小型Web应用程序的HTML工作; 该devise要求具有圆angular和阴影的内容区域。我已经能够用CSS3制作这个，并且在Firefox和Chrome上完美运行：但是，Internet Explorer 7和8（不支持CSS3）则是另一回事：有没有一个简单的，轻量级的JavaScript解决scheme，使我可以1）使用特定于IE的function来实现这一点，或2）修改DOM（以编程方式），以在内容区域添加自定义图像来模拟效果？

为什么在将透视图应用于父元素时，背景隐藏隐藏function在IE10中不起作用？: 好吧，这是另一个IE10故障。问题是在父元素上应用透视会打破背面隐藏设置。请看这个小提琴： http : //jsfiddle.net/2y4eA 当您将鼠标hover在红色方块上时，它将在x轴上旋转180°，并且即使背面的可见性设置为隐藏，也会显示背面，至less直到达到180°，然后消失。删除透视属性，你会看到它的预期效果，背面是根本不可见的，但是当然3D效果是丢失的。可以通过在transform属性中应用透视来解决这个问题： http : //jsfiddle.net/M2pyb但是，当z被设置为除0以外的任何值时，这将导致与transform-origin-z合作的问题，整个事情成为“缩放”： http : //jsfiddle.net/s4ndv所以不幸的是，这不是一个解决scheme。背面visibilty thingy可能是一个错误？如果是这样的话，除了我提到的那个之外，还有没有其他的方法？