Tag: css3

Google Chrome文字阴影渲染: Google Chrome在实现CSS3文字阴影方面有一个非常烦人的缺陷。应用文本阴影时，子像素抗锯齿function将closures。否则，-webkit-font-smoothing将不会说服它。粗糙的alpha通道反别名导致阴影与字母的混合，这与像素化文本一起产生一个非常丑陋的外观。如果使用手写字体，如Monotype Corsiva http://www.newfonts.net/index.php?pa=show_font&id=130 你可以清楚地看到这个地方之一是在Twitter – http://dev.twitter.com/pages/auth 。文本阴影用于在那里的文字大纲：在Chrome中查看页面，与FF或IE比较，你会看到它有多糟糕。效果变得更糟糕，直到它使它完全不可读。有关此问题的技术讨论，请访问： http : //www.google.com/support/forum/p/Chrome/thread?fid= 5d1c0f2082af0f21000483e9a516d36e& hl=zh-CN 在Chromium项目（issue 23440）中提交了一个错误。这个bug已经有一年多的时间了，还没有分配给任何人。谷歌的开发者看到它，认为它不是那么重要，并使其老化。事实certificate，他们只是修复了“stream行”的错误，这种蹩脚的做法让人印象深刻！我对Chrome非常失望！ Web排版和CSS3被越来越多的人每天使用，使网站更加美丽的地方！存在这样的问题可以减缓这种情况。所以，需要一个公共的努力来修复这个问题。告诉其他人，写在你的博客。您可以访问http://code.google.com/p/chromium/issues/detail?id=23440并投票解决问题。您可以通过点击位于左上angular的明星（某些types的Google帐户需要 – Gmail等）来实现。为了使事情更清楚 – 我的问题有两个目标： find技术解决方法。让Google在Chrome中解决这个问题。我会把每一个链接张贴到关于这个问题的文章上，并将其标记为接受最好的技术解决scheme或公共努力。

防止：元素从包装到下一行之后: 我有这个HTML： <ul> <li class="completed"><a href="#">I want the icon to stay on the same line as this last <strong>word</strong></li> </ul> 我使用：after伪元素追加一个图标： ul li.completed a:after { background:transparent url(img.png) no-repeat; content: ''; display:inline-block; width: 24px; height: 16px; } 问题是：如果可用的宽度太小，图标将换行到下一行。我希望它保持在它所附加的链接的最后一个字的同一行上：这是可行的，没有添加“nowrap”的整个链接（我想单词包装，而不是图标）。在这里看到jsFiddle。

拉伸子div高度以填充具有dynamic高度的父级: 从下面的小提琴中可以看出，我有两个div ，包含在父div ，可以包含大div，我的目标是使这些div高度相等。 http://fiddle.jshell.net/y9bM4/

CSS3单向过渡？: 使用CSS3转换，可以对任何属性进行“平滑”和“平滑”效果。我可以设置只有“平滑”的效果？我希望解决scheme只在CSS中，如果可能的话，避免使用JavaScript。逻辑stream程：用户点击元素过渡需要0.5s将背景颜色从白色变为黑色用户放开鼠标左键过渡需要0.5s将背景颜色从黑色变为白色我想要的是：用户点击元素转换需要更改0 用户放开鼠标button 转换需要0.5s来改变… 没有“过渡期”，但是有一个“过渡期”。

在CSS中计算最大值或最大值: 是否有可能做这样的事情 max-width: calc(max(500px, 100% – 80px)) 要么 max-width: max(500px, calc(100% – 80px))) （但哪些工作！）在CSS3？

使用@ font-face使用多个自定义字体？: 我确定我错过了一些非常简单的事情。一直使用正常字体的单个自定义字体： @font-face { font-family: CustomFont; src: url('CustomFont.ttf'); } 所有工作正常，当我使用它，但如果我想添加另一个自定义字体，我该怎么办？我试着用逗号分隔下一个或添加一个完整的其他字体，但不能得到第二个字体的工作。

如何在HTML5video上设置缩略图？: 有没有办法在HTML5video上设置缩略图？玩之前我想看一些照片。我的代码如下所示： <video width="470" height="255" controls> <source src="video.mp4" type="video/mp4"> <source src="video.ogg" type="video/ogg"> <source src="video.webm" type="video/webm"> <object data="video.mp4" width="470" height="255"> <embed src="video.swf" width="470" height="255"> </object> </video> 谢谢！

Flexbox在IE中不垂直居中: 我有一个简单的网页，里面有一些以页面为中心的Lipsum内容。该页面在Chrome和Firefox中正常工作。如果我减小窗口的大小，内容将填充窗口，直到它不能，然后添加一个滚动条并填充内容离屏幕，底部。但是，页面不在IE11中。我可以通过弯曲身体来使页面居中在IE中，但是如果我这样做，则内容开始向屏幕顶部移动，并切断内容的顶部。以下是两种情况。见相关的小提琴。如果问题不是很明显，减小结果窗口的大小，以便强制生成一个滚动条。注意：此应用程序只针对最新版本的Firefox，Chrome和IE（IE11），它们都支持Flexbox的候选推荐标准，所以function兼容性不应该成为问题（理论上）。编辑：当使用Fullscreen API全屏显示外部div时，所有浏览器都使用原始CSS正确居中。但是，在离开全屏模式后，IE将恢复为水平居中和垂直顶部alignment。编辑：IE11使用非供应商特定实施的Flexbox。灵活的盒子（“Flexbox”）布局更新在Chrome / FF中正确resize，不在IE11中正确resize 小提琴： http : //jsfiddle.net/Dragonseer/3D6vw/ html, body { height: 100%; width: 100%; } body { margin: 0; } .outer { min-width: 100%; min-height: 100%; display: flex; align-items: center; justify-content: center; } .inner { width: 80%; } […]

根据元素高度和宽度翻译X和Y百分比值？: 翻译一个元素Y轴50％会将其移动到其自身高度的50％，而不是我所期望的父母高度的50％。如何告诉翻译元素将它的翻译百分比基于父元素？还是我不明白什么？ http://jsfiddle.net/4wqEm/2/

必须Bootstrap容器元素包含行元素？: 从阅读文档看来， .container是.row和包含.spanX （其中x总数为12）的div的“父”包装器。但是，它们的导航示例中似乎没有.row 。此外，在他们的文档网站上， .container由几个navbar相关的div包装。任何人都可以详细介绍一下框架应该如何工作？我是新来的。