Tag: CSS

适当的CSS来生成一个跨浏览器的复选标记: 我正在使用以下CSS在我的<li>列表项之前添加复选标记： ul.checkmark li:before { content:"\2713\0020"; } 然后在HTML中： <ul class="checkmark"> <li>Learn the keyboard at your own pace</li> </ul> 在Safari，Firefox和Chrome中很好用，但在IE8上显示“怪异的外框”。苹果浏览器： IE8：有没有一个便携的方式来指定一个好看的复选标记，可以在所有主stream浏览器中使用？编辑解决scheme ：我最终使用下面的一个变化meder的答案： ul.checkmark li { background:url("../checkmark.gif") no-repeat 0 50%; padding-left: 20px; } ul.checkmark { list-style-type: none; }

Bootstrap 3.0附带列表更改宽度: 我正在迁移到bootstrap 3.0.0，我遇到了粘贴菜单的问题：一旦粘贴（10px滚动后），它的宽度就会改变。在这个小提琴中，它变得更小，在我的真实网站中它变得更宽，并扩大了实际的内容。它与引导v2.3.2完美的工作。检查后，看起来像列表项不能很好地显示.affix {position: fixed;}出现。有任何想法吗？解决scheme：基于最新的评论，我最终添加了这个JS片断，很好地修复它，而不必为固定元素设置固定宽度： $(function() { var $affixElement = $('div[data-spy="affix"]'); $affixElement.width($affixElement.parent().width()); });

Chrome上的文本input：行高似乎有一个最小值: 我正在尝试使用相同的方式在文本input中使用值，文本input的占位符和跨度。具体来说，我想独立于字体大小来控制行高。但是，input值似乎存在某种最小行高（或类似的影响），似乎以某种方式将文本向下推，以防止相同的样式。 HTML示例： <div> <input type="text" value="Text"> <input type="text" placeholder="Text"> <span>Text</span> </div> CSS： div { line-height: 50px; font-family: Arial; } input, span { font-size: 50px; line-height: 50px; height: 50px; width: 100px; padding: 0; min-height: 0; display: inline-block; font-family: inherit; border: 2px solid red; overflow: hidden; vertical-align: top; } 结果可以看到 http://plnkr.co/edit/oHbhKDSPTha8ShWVOC7N?p=preview以及在Linux上的Chrome 44.0.2403.155（64位）中的以下屏幕截图：奇怪的是，占位符似乎是与所需的线高度，而input的文本值定位不同。在这一点上，我并不关心占位符的颜色。我如何devise所有3个元素，使文本处于相同的位置，我正在使用自定义行高？ […]

在桌子上设置最大高度: 我正在devise一个有一些表的页面。看来，造型表更痛苦，然后应该是。问题是以下。表格应该有一个固定的高度，并在底部显示空白 – 当内容太less时 – 或垂直滚动条 – 当显示太多时。添加到这个表有一个不应该滚动的标题。据我所知， thead不滚动是表的默认行为。而拉伸tfoot可以很好地填补空白的目的。可悲的是，似乎每一个我可以放在桌子上的限制都被忽视了。我努力了 table { height: 600px; overflow: scroll; } 我已经尝试过max-height 。我试图将表格放在绝对位置，同时给出顶部和底部的坐标。我曾尝试手动编辑Firebug中的高度，以查看它是否是CSS特性的问题。我也试图设置tbody的高度。事实是，无论我的努力如何，桌子总是保持其内容的高度。当然，我可以伪造一个带有div结构的表格，但实际上它是一个表格，我担心使用div可能会遇到某些列可能无法正确alignment的问题。我该如何给一张桌子一个高度？

高级CSS技巧：如何跨越CSS3网站布局中的多个列的图像？: 鉴于：一个基本的四列布局，一个简单的连续的文本段落，以及只有一张照片跨越三列，右上alignment。现在，我们如何在html / css3 / js的最后三列中优雅地展示我们的图像，以便我们的文本自动在图像周围stream动？。。 .quatroColumns{} /* css multi column 4 columns */ .imageSpanning2Columns{} /* align to top-right */ .imageSpanning3Columns{} /* align to top-right */ .imageDescription{} /* description box over image */ http://jsfiddle.net/Vbr9d/205/ （ find图像应该去的地方的一个痛苦：不简单＆不优雅的开始！） http://jsfiddle.net/Vbr9d/206/ （看起来丑陋，但HTML开始优雅的图像和文字分离！）忘记旧的浏览器版本，除了目前主要的浏览器版本FireFox InternetExplorer Chrome Safari。任何想法，方向或实验都是受欢迎的。可选的JavaScript试用版将段落文本自动分成不同的div，但也只有在某种程度上，如果你确信CSS将不会成为这种基本布局，直到2050年。

如果没有JavaScript，当长一个不合适时，我可以显示不同的文字吗？: 我正在尝试做什么我有一个大小有限的框，应该包含一些文本： .box { width: 100px; height: 40px; background-color: yellow; } <div class="box"> Some text goes here. </div> 但是，如果文本太长而无法放入文本框中，我想用我预先准备的另一个更短的文本replace文本。例如，如果我想用这两个名字填充两个框： Short version Long version ———————————————————— Rudolf E. Raspe Rudolf Erich Raspe Baron Munchausen Hieronymus Karl Friedrich von Munchhausen 那么第一个盒子里面会包含“鲁道夫·埃里克·拉斯佩”（Rudolf Erich Raspe），因为里面的尺寸足够短，而第二个盒子里会包含“男爵男爵”（Baron Munchausen），因为男爵的全名太长了。我怎样才能build立这样一个盒子，只使用HTML5和CSS3？浏览器的兼容性很重要，但是我并不需要适应11之前的旧版本或Internet Explorer。备择scheme 我可以select任何标准选项来处理太长的文本 – 让它溢出，或通过overflow: hidden ，或添加滚动条，或添加省略号，或任何其他标准解决scheme。但是因为我已经有了每个可能的文本的短版本，所以我想用这些。例如，我可以通过使用包装器并将其大小与盒子的大小进行比较来在JavaScript中执行此操作。但是如果可能的话，我想要一个非JavaScript的解决scheme。我试过了 […]

属性select器的值等于A还是B？: 我想知道是否可以在CSS中指定一个属性等于两个值之一的元素，如下所示： input[type=text][type=password] 然而，这个select器似乎并没有工作（我假设因为指定两次相同的属性是无效的），有没有人知道如何做到这一点？谢谢，Alex。

在什么情况下Flex-shrink应用于柔性元素，它是如何工作的？: 我已经玩过这个漂亮的CSS Flex的演示页面，我理解了大部分的概念，但是我无法看到flex-shrink在工作中。无论我在那里应用什么设置，我都看不到页面上的差异。从规格： <“柔性成长”> 此组件设置“flex-grow”longhand，并指定flex增长因子，该因子决定了在分配正空闲空间时flex项目相对于flex容器中其余Flex项目将增长的程度。省略时，设为“1”。 <“柔性缩水”> 此组件设置“flex-shrink”longhand并指定柔性收缩因子，该因子决定在分配负空闲空间时，Flex项目相对于Flex容器中其余Flex项目收缩的程度。省略时，设为“1”。柔性收缩因子在分配负空间时乘以柔性基础。在什么情况下应用flex-shrink （即负空间分布时）？我已经尝试过在flexbox元素上设置宽度的自定义页面，并且在里面的元素的宽度（min-）使溢出，但它似乎不是描述的情况。它已经被支持了吗？作为解决scheme，链接的演示中的一组选项或者JSFiddle-like现场演示将非常感谢。

什么是弹性基础属性设置？: 将max-width或width设置为弹性项目而不是flex-basis有什么区别？它是flex-grow/shrink属性的“突破点”吗？而当我设置flex-wrap: wrap行浏览器如何决定在哪一点下移项目到新行？是根据它们的宽度还是“弹性基础”？例如： http : //jsfiddle.net/wP5UP/最后两个框有相同的flex-basis: 200px ，但是当窗口在300px和400px之间时，只有其中一个向下移动。为什么？

嵌套伪元素内的伪元素: 我有一个：开幕前的“报价”和之后的一个结束报价。现在我想要的是：之后：“引用”参考后，但我不能得到它的工作。有谁知道这是可能的吗？我的代码到目前为止： – blockquote:before { content: '\201C'; } blockquote:after { content: '\201D'; } blockquote { font-size: 22px; line-height: 24px; text-indent:60px; } blockquote:before { font-size: 170px; margin-left: -136px; margin-top: 50px; opacity: 0.2; position: absolute; overflow:visible; float:left; width:135px; } blockquote:after { float: right; font-size: 170px; margin-right: 35px; margin-top: 33px; opacity: 0.2; overflow:visible; width:135px; } blockquote[cite]:after:after […]