Tag: css3
裁剪文本太长内div
<div style="display:inline-block;width:100px;"> very long text </div> 任何方式来使用纯CSS剪切太长的文本，而不是显示在下一个新行，只显示最大100px
iOS 4.2 + webfont（ttf）的粗体字重渲染错误
这是一个很明确的规定：在iOS移动Safari浏览器中指定ttf字体渲染font-weight:bold不正确，使用iOS 4.2 / 4.3 Beta 3或更高版本的iphone / ipad打开演示网站： （这是谷歌字体的Reenie + Beanie） http://jsbin.com/ojeqe3/16/ 屏幕截图 你看到粗体字看起来双重渲染 。 这对于中小字号不是很重要，但是对于大字号/放大而言非常重要 我的朋友会向苹果报告这个错误。 但是，他可以做什么来解决这个错误？ （杀死文本 – 调整不好 ） 更新：这一个不是在iOS5中修复的。 我所知道的最好的解决scheme将是 使用font-weight:normal （如演示中所示） 使用-webkit-text-strok e或text-shadow使其看起来像“大胆”（加上iPad只有css – 由js添加的正文前缀，而不仅仅是媒体查询）
在CSS中嵌套@media规则
支持似乎是不同的浏览器.. 检查链接 Firefox：黑色，白色文字。 Opera，Chrome，IE9：蓝色，黑色文字。 这是正确的，我将如何使其一致？ 代码 @media screen and (min-width: 480px) { body{ background-color:#6aa6cc; color:#000; } @media screen and (min-width: 768px) { body{ background-color:#000; color:#fff; } } } 有趣的是，似乎在条件@import中嵌套媒体查询似乎是行得通的。 例如： 的index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Media test</title> <link rel="stylesheet" type="text/css" href="importer.css" /> </head> <body> <h1>Why is this not consistent.</h1> </body> </html> […]
CSS媒体查询 – 软键盘打破了css的方向规则 – 替代解决scheme？
我正在使用多个平板电脑设备 – 包括Android 和iOS 。 目前我所有的平板电脑都有以下的分辨率变化。 1280 x 800 1280 x 768 1024 x 768（iPad显然） – iPad没有这个问题 基于设备方向的风格最简单的方法是使用以下语法使用媒体查询的方向。 @media all and (orientation:portrait) { /* My portrait based CSS here */ } @media all and (orientation:landscape) { /* My landscape based CSS here */ } 这在所有平板设备上都可以正常工作。 但是 ，问题是，当设备处于纵向模式，用户在任何input字段（例如search）上点击时，软键popup – 这减less了网页的可见区域，并迫使它在基于CSS的景观中呈现。 在Android平板设备上，这取决于键盘的高度。 所以，最终网页看起来破碎了。 因此，我不能使用CSS3的方向媒体查询来根据方向应用样式（除非有更好的媒体查询来定位方向）。 这是一个小提琴http://jsfiddle.net/hossain/S5nYP/5/模拟这个 – 为设备testing使用完整的testing页面 […]
在IE9中的css3文字阴影
有没有一种简单的方法让css3 text-shadow在IE9中工作？ 至less有一个文字阴影会很好。 我想最好是支持IE8。 我希望有一个简单的jquery插件或.htc文件，它只是看一个元素的文本阴影CSS属性，并实现它为IE9。
CSS3可以转换字体大小吗？
如何使鼠标hover的字体变大？ 随着时间的推移，颜色转换工作正常，但由于某种原因，字体大小立即切换。 示例代码： body p { font-size: 12px; color: #0F9; transition:font-size 12s; -moz-transition:font-size 12s; /* Firefox 4 */ -webkit-transition:font-size 12s; /* Safari and Chrome */ -o-transition:font-size 12s; transition:color 12s; -moz-transition:color 12s; /* Firefox 4 */ -webkit-transition:color 12s; /* Safari and Chrome */ -o-transition:color 12s; } p:hover { font-size: 40px; color:#FC0; }
CSS3列 – 强制非破/分裂元素？
我使用一些CSS3列（ column-count: 2;column-gap: 20px; ）将一些内容分成两列。 在我的内容中，我有一个<p> ，然后是<blockquote> ，然后是另一个<p> 。 我的问题：有没有办法阻止我的<blockquote> （或任何其他指定的元素）分裂成两列？ 例如，目前我的<blockquote>部分在第1列，部分在第2列。 理想情况下，我想这样做是因为<blockquote>保留在第1列或第2列中。 任何想法，如果这可以实现？ 谢谢！
是否有可能使用文本溢出：省略号多行文字？
我有一个特定的width和height的p标签。 我想使用text-overflow:ellipsis来得到…如果标签中的文本太长。 这是可能的解决与CSS多行文本？
为什么媒体查询的顺序在CSS中很重要？
最近，我一直在devise更具响应性的网站，我经常使用CSS媒体查询。 我注意到的一种模式是，媒体查询的定义顺序实际上很重要。 我没有在每个浏览器中进行testing，只是在Chrome上进行testing。 有没有解释这种行为？ 有时，当您的网站不能正常工作时，您会感到沮丧，并且您不确定是查询还是查询的写入顺序。 这是一个例子： HTML <body> <div class="one"><h1>Welcome to my website</h1></div> <div class="two"><a href="#">Contact us</a></div> </body> CSS： body{ font-size:1em; /* 16px */ } .two{margin-top:2em;} /* Media Queries */ @media (max-width: 480px) { .body{font-size: 0.938em;} } /* iphone */ @media only screen and (-webkit-min-device-pixel-ratio: 2) { body {font-size: 0.938em;} } /*if greater than 1280×800*/ […]
CSS3属性webkit溢出滚动：触摸错误
iOS 5向网页devise师发布了一个新的属性-webkit-overflow-scrolling:touch ，它使用iOS设备硬件加速器为可滚动的div提供本地滚动。 当我们的网站在开发中实施时，它确实工作，但不好。 我相信可能有一个CSS问题，所以我在这里问。 下面的小提琴会告诉你它完美的工作 如果您在开发中popup到我们的网站，您将在设备选项卡下find相同的面板，但是在iOS上，尽pipe滚动是完美的，但溢出的部分不会显示，并且图像会被明显地切成两半。 http://www.golfbrowser.com/courses/mill-ride/ 我不知道如何解决这个http://www.golfbrowser.com/photo.PNG
