草庐IT

webkit-flex

全部标签

html - 在 Flex 中显示 HTML 的最佳方式是什么?

我的HTML包含符号,例如作为上标(™)的商标“TM”。在普通的HTML中,我会使用"™"或™显示商标TM。但是,我找不到将这样的HTML导入Flex并使其正确显示的方法。我对有类似的问题标签。我的HTML:ThisinformationisintellectualpropertyofMyCompany™.Availablefeatures:Feature1Feature2Feature3Feature4COPYRIGHTINFORMATION:Copyright©2008,MyCompany.Allrightsreserved.我让它工作的唯

html - 防止溢出 : hidden (webkit) 在父级中滚动超大子级

我对Webkit浏览器有疑问。当我将光标聚焦到时会发生此问题元素并开始移动鼠标而不松开按钮。这是一个截屏视频-http://screencast.com/t/P1BnT7ZAdc这是一个html/css演示-http://napokrovke.mysundays.net/webkit_bug.html如何防止这种行为? 最佳答案 这不是一个错误,它是因为你已经将wrapper设置为300px,并对其应用了hidden的overflow属性,这允许你在内容大于你定义的300px时滚动,我在OSX上的firefox,我还可以在其中滚动。

html - CSS Flex 元素之间的静态填充

我正在尝试在CSS中创建一个灵活的布局,该布局将根据客户的分辨率进行换行。例如,在横向(1024px宽)的ipad上,我想显示以下内容:但是在纵向剧本(600像素宽)上,我想显示以下内容:除了20像素的边距外,我几乎一切正常。我似乎无法弄清楚如何指定包装元素的边距。这是我的代码:HTML:Box1Box2CSS:.box-row-fluid{display:-webkit-flex;-webkit-flex-flow:rowwrap;}.box-row-fluid>.col{-webkit-flex:1400px;background:#fff;}代码假定浏览器是一个有效的webkit

javascript - 移动Webkit和Hammer JS上的多个元素响应触摸事件

我正在使用HammerJS库开发一个小型副项目,我在ChromeDevTools模拟器和两台iOS7设备上调试时遇到了问题。它似乎在桌面浏览器上运行良好。在这里fiddle:http://jsfiddle.net/w80baz5g/5/更多信息如下。我有一组元素,像这样:和HammerJS监听点击事件:functioninitItems(el){varitemToTap=newHammer.Manager(el,itemOptions);itemToTap.add(newHammer.Tap());itemToTap.on("tap",function(event){console.l

html - 水平居中 flex 容器

当使用flex创建图像网格时,如何将网格本身水平居中放置在页面上?我仍然希望图像在每一行上左对齐。我希望它对每行的元素数量是动态的。JsfiddlewithwhatIhavesofar.gallery{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-content:flex-start;align-items:flex-start;}.gallery-artwork{width:400px;display:flex;margin:10px;} 最佳

jquery - 复杂的 Webkit 错误?相对位置 + Z-Index + 溢出隐藏 + CSS3 变换

与其他现代浏览器相比,下面的代码(JSFiddlePreview)在Webkit中产生了意想不到的结果:jQuery(document).ready(function($){RunFunction();$('.ColorSquare').click(function(){$('#Lightbox').css('display','block');$('#ShowColorSquare').css('display','block');$('#ShowColorSquare').css('z-index','10');$('#ShowColorSquare').css('left',$(

html - 等高 flex 列被显示为 : flex 的子元素破坏

CSS:*{padding:0;margin:0;box-sizing:border-box;}body{display:flex;background-color:#F5F5F5;}body>header{display:flex;position:fixed;width:100%;height:60px;align-items:center;background-color:#373737;-webkit-box-shadow:03px3pxrgba(0,0,0,0.19);box-shadow:03px3pxrgba(0,0,0,0.19);}aside{width:250px;

html - CSS3 3D flex 透视

CSS33D变换+动画很棒。我想知道是否有办法让某些东西flex。此示例翻转了(纸张)div,但动画看起来很僵硬,因为实际上,当您翻转纸张时,它会flex一点。所以我忽略了任何属性,或者可能使它看起来像flex的组合?div{width:90%;height:700px;position:fixed;left:5%;top:0;background-color:rgba(0,0,0,0.9);-webkit-transform:perspective(1000);-webkit-transform-style:preserve-3d;-webkit-transform-origin:t

html - 我们可以从单个节点中删除 CSS 属性“-webkit-scrollbar”吗?

如何从单个HTML元素中删除CSS属性::-webkit-scrollbar?在我的CSS文件中,我有这段代码:::-webkit-scrollbar{width:6px;height:6px;background-color:transparent;}::-webkit-scrollbar-track{background-color:transparent;width:6px;}::-webkit-scrollbar-track-piece{background-color:blue;}::-webkit-scrollbar-thumb{background-color:#d4de

css - WebKit 中 <input required ...> 的样式

请在Chrome浏览器中查看此示例:http://jsfiddle.net/ymzTB/当您将输入留空并单击enter时,您将收到如下消息:请填写此字段。看起来不错。如何在WebKit和其他浏览器中设置此消息的样式,例如,将背景颜色替换为红色,或者将字体颜色或大小设置为其他颜色? 最佳答案 您可以使用以下pseudoclasses:::-webkit-validation-bubble{}::-webkit-validation-bubble-top-outer-arrow{}::-webkit-validation-bubble-