草庐IT

webkit-region-break

全部标签

html - CSS: page-break-before, always, 除了第一次?

我正在尝试创建一个打印精美的html页面。我需要在顶级构造之间强制分页,因此我将一个CSS类添加到每个构造的顶级元素,并在该类的CSS中设置page-break-before:always。例如:.......prettyprint.toplevel{page-break-before:always;}我的问题是我在第一个顶级元素之前得到一个空白页面。考虑到page-break-before:always应该做什么,这是完全有道理的。但我不想要它。因此,一个选择是不在第一个元素中包含“toplevel”类,或者提供一个不设置page-break-before:always的新“firs

html - -webkit-flex 无法在 Android 上正确显示

在意识到display:flex的奇妙功能后,我制作了一个网页,当从Windows上的Chrome26浏览时,它看起来完全符合我的要求。但是,它在我的Android上的Chrome26中不起作用,在我的模拟器中的Android浏览器4.1中也不起作用。根据caniuse,所有这些浏览器都应该支持它。也许巧合的是,它在Android中的显示方式(据我所知)与我切换到旧版本display:box时的显示方式相同。这是它在Windows和Android中的对比:我的问题是,如何防止这些跨设备问题?也许在它变得更标准之前使用flex以外的东西会更好。谁能给我提供一个不使用flex或适用于And

html - word-wrap : break-word and word-break: break-word之间的区别

我需要在某个地方修复一些CSS,因为我的文本没有环绕,如果它是一个非常长的单词,它会无限期地继续下去。在大多数情况下,我在我的CSS文件中尝试了word-wrap:break-word;但它没有用。然后,令我惊讶的是,根据GoogleChrome开发者工具的建议,我尝试了word-break:break-word;并解决了我的问题。我对此感到震惊,所以我一直在谷歌上搜索以了解这两者之间的区别,但我在这个问题上一无所获。此外,我不认为word-break:break-word;是记录在案的行为W3没有提到它。我在Safari和Chrome上对其进行了测试,它在两者上都运行良好,但我对使用

html - 我可以将 webkit-gradient 应用于边框或背景吗?

所以我想让边框变淡。我有我想要的确切webkit渐变设置。但不确定如何在边框元素上实现它。这可能吗?我该怎么做?请仅使用CSS3。顺便说一句,我尝试了以下CSS,但没有用:border-color:-webkit-gradient(linear,leftbottom,lefttop,color-stop(0.74,rgb(214,11,11)),color-stop(0.39,rgb(175,13,13)),color-stop(0.07,rgb(157,22,22)));border-style:solid;border-width:10px; 最佳答案

css - 用户选择 :none breaking Safari contenteditable

我有一个带有contenteditable="true"的div。我可以使用IE、Chrome和Firefox但不能在Safari中将文本输入到div中。我最终将问题追溯到下面给div容器的样式声明。container{-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-ms-user-select:none;}我不久前根据Chrometakingfirstdouble-click放入了这些以防止容器在双击时变成蓝色。现在我发现该解决方案破坏了Safaricontenteditable。有没有人

css - 具有负 z-index 的绝对定位 HTML5 视频元素会破坏 webkit 浏览器中的背景附件

我使用HTML5视频元素作为背景层,效果很好,但是,它会导致页面上的其他元素出现问题,这些元素具有属性为background-attachment:fixed的背景图像.背景图像变得松散、splinter或完全消失。如果我将视频包装器div的z-index更改为正数,问题就会消失,但这违背了将其用作背景层的目的。此问题仅发生在webkit浏览器(Chrome和Safari)中。这是基本的HTML:.........还有CSS:.fixed-background{background:url('image.jpg')centercenter;background-size:cover;b

html - css 自动换行 : break-word won't work

我有两个内联跨度。代码示例:和scss示例:.comment_content{word-wrap:break-word;}.comment_author{display:inline-block;vertical-align:top;}.comment_text{display:inline-block;word-wrap:break-word;width:100%;}如果我的预期View必须是:如果用户输入不带空格的字符串,字符串不会中断。并打破设计:如何正确拆分长单词?? 最佳答案 white-space:nowrap将阻止wo

html - 使文本不可选择和不可复制(webkit,同时被可复制文本包围)

以下代码片段显示了如何使文本不可选择。遗憾的是,如果您在Chrome的任一侧选择文本,当您复制和粘贴时,未选择的文本也会被粘贴。有没有什么办法可以让大量的写作,以及贯穿始终的不可选择的内容,您可以复制和粘贴,而不粘贴不可选择的内容?.hide{color:orange;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}Hellothistextisselectabl

javascript - 浏览器 F11 全屏未注册到 -webkit-full-screen 或 Javascript API

我正在使用javascript(例如,requestFullscreen)和css(:-webkit-full-screen)API来检测浏览器是否处于全屏状态。我对这些API没有问题,因为它们可以成功运行。我遇到的问题是,如果用户点击F11,它不会在浏览器环境中注册,并且用于全屏检测的javascriptapi和CSSapi不会检测全屏。有什么办法可以解决这个问题吗?我有一些动画取决于屏幕的大小(关于全屏),我已经走到了死胡同。 最佳答案 值得一看(function(){varchecktimer;functionisFullSc

html - -webkit-border-radius 不能正确裁剪图像

我有5个浏览器用于呈现html编码的页面:IE9、Firefox4.0和所有最新版本的Chrome、Safari和Opera。现在在IE9和Firefox4.0中使用border-radius:和-moz-border-radius:可以正确裁剪图像,但在Opera、Chrome和Safari中使用-webkit-border-radius:会失败。在Opera中,图像根本没有被裁剪,而在Safari和Chrome中,图像被裁剪了一些,但边框也被裁剪掉了。.nonTyp{margin:15px15px15px15px;border:4pxinset#C1C8DD;border-radi