为什么在ipad上看网页的图片排版不在同一行上,是我写CSS样式问题吗?

html-css010

为什么在ipad上看网页的图片排版不在同一行上,是我写CSS样式问题吗?,第1张

平板电脑和手机端样式编辑需要考虑很多兼容的问题,你可以使用dw中的平板编辑功能,针对不同的移动端来进行css代码的编写和调试。不过样式的编辑总是要经过调试才可以的。靠近左边应该是你的外层div宽度不够。

只要在样式里面加一句去掉css去掉iPhone、iPad的默认按钮样式就可以了。 (不要写在class里哦)

input[type="button"], input[type="submit"], input[type="reset"] {-webkit-appearance: none}

textarea {  -webkit-appearance: none}

如果还有圆角的问题,

.button{ border-radius: 0 }

1、去除Chrome等浏览器文本框默认发光边框

input:focus, textarea:focus {outline: none}

去掉高光样式:

input:focus{

-webkit-tap-highlight-color:rgba(0,0,0,0)

-webkit-user-modify:read-write-plaintext-only}

当然这样以来,当文本框载入焦点时,所有浏览器下的文本框的边框都不会有颜色上及样式上的变化了,这样的话,当文本框载入焦点时,边框颜色就会变为橙色,给用户一个反馈。

2、去除IE10+浏览器文本框后面的小叉叉,只需下面一句就ok了

input::-ms-clear {display: none}

自己尝试的解决方案

后来发现,是css属性值的问题。

即, flex容器中的绝对定位子元素会脱离flex布局流 ,也就是说flex: 1对子元素来说已经失效了。因此他的高度为绝对定位中的100%设置的高度,但是又设置了overflow:hidden,因此才会在虚拟键盘隐藏时出现一部分空白,从而导致了导航条的隐藏。