我正在使用这种仅限CSS的策略来响应背景图像和响应式背景图像以及包含的内容 ......我正在使用的背景和内容设置类型的示例:
<div class="fullscreen-cont">
<div class="fullscreen-img"></div>
<div class="cont-content-a">
<div class="cont-content-b">
Example content
</div>
</div>
</div>
.cont-content-a {
display:table;position:relative;z-index:2;
width:100%;
height:100%;
}
.cont-content-b {
display:table-cell;
vertical-align:middle;
text-align:center;
}
我编辑了上面的代码,只包含内容的样式.点击上面的链接查看完整的策略和样式.
我正在处理的主要页面基本上是一个徽标,带有内联按钮的文本输入和下面的登录按钮.徽标和登录按钮都是绝对定位的.移动设备上的一切看起来都很棒.
仅当用户触摸输入文本时才会出现此问题.键盘缩小视口,因此缩小背景图像,压缩和重叠所有包含的内容.
有没有人知道在移动设备上打开键盘时是否有办法禁用视口调整大小？有没有办法在没有移动jQuery的情况下实现这一目标？
我的网页底部有一个固定的CTA按钮(号召性用语).在较新版本的iOS上向下滚动页面,移动版Safari隐藏了底部导航栏(带有后退,前进,共享,书签和新标签按钮).如果单击CTA按钮,移动Safari将显示底部导航栏,而不是执行该操作.
作为一个解决方案,我一直希望强制显示底部导航栏.有办法做到这一点吗？两个杰克线程时,在移动浏览,和主题翻转的移动网站可以查看单个项目时,拉这一关.
到目前为止,我无法对此进行逆向工程.有谁知道力量表演是如何完成的？
相关: 与页面底部对齐的按钮与移动Safari的菜单栏冲突,并 在点击视口底部时阻止Mobile Safari显示工具栏
这是我没有预料到的
奇怪的是,它<picture>似乎在图像本身下方有自己的位置和高度.它的CSS height设置为auto,所以我不确定这个高度18px来自何处.
这是预期的行为
在<picture>遏制<img>内<picture>.在<picture>具有相同的高度,什么是在HTML/DOM包含在其中,例如<img>.
这就是我要做的事情,试图解决问题
我已经尝试删除我们正在使用的PictureFill库以确保图像填充容器,但这不是影响该高度的因素.
我也尝试检查DOM以查看高度的<picture>来源.此元素上没有设置填充或边距或高度.唯一的内容是它<source>和<img>,它是a的标准包含元素<picture>.
任何帮助或见解都受到高度赞赏.JSBin上的示例代码!
这是示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<picture content="https://img-dev.evbuc.com/https%3A%2F%2Fs3.amazonaws.com%2Feventbrite-dev%2Fimages%2F10068705%2F149308521389%2F1%2Foriginal.jpg?w=1000&rect=0%2C205%2C3264%2C1632&s=6fa833f7049033ffa33ac3f11ec4433a">
<source srcset="
https://img-dev.evbuc.com/https%3A%2F%2Fs3.amazonaws.com%2Feventbrite-dev%2Fimages%2F10068705%2F149308521389%2F1%2Foriginal.jpg?w=480&rect=0%2C205%2C3264%2C1632&s=d3ce62073acf8faef26303df602d98ca 480w,
https://img-dev.evbuc.com/https%3A%2F%2Fs3.amazonaws.com%2Feventbrite-dev%2Fimages%2F10068705%2F149308521389%2F1%2Foriginal.jpg?w=600&rect=0%2C205%2C3264%2C1632&s=299ee1965b7991d853f1c74ece47a4fc 600w,
https://img-dev.evbuc.com/https%3A%2F%2Fs3.amazonaws.com%2Feventbrite-dev%2Fimages%2F10068705%2F149308521389%2F1%2Foriginal.jpg?w=800&rect=0%2C205%2C3264%2C1632&s=7b00f35515de1a75308074e0b8531606 800w,
https://img-dev.evbuc.com/https%3A%2F%2Fs3.amazonaws.com%2Feventbrite-dev%2Fimages%2F10068705%2F149308521389%2F1%2Foriginal.jpg?w=1000&rect=0%2C205%2C3264%2C1632&s=6fa833f7049033ffa33ac3f11ec4433a 1000w,
https://img-dev.evbuc.com/https%3A%2F%2Fs3.amazonaws.com%2Feventbrite-dev%2Fimages%2F10068705%2F149308521389%2F1%2Foriginal.jpg?w=2000&rect=0%2C205%2C3264%2C1632&s=03b760c29e398261cef276c2bdb0fcb2 2000w
" sizes="100vw">
<img class="listing-hero-image js-picturefill-img" data-automation="listing-hero-image" alt="The Cat is in the (Hockey) Bag">
</picture> …尝试创建单选按钮输入并设置checked属性时,该checked属性永远不会出现.有趣的是,:checked状态元素的CSS 与VoiceOver当时为所选单选按钮读出的工作方式相同.
这是一个显示此问题的Ember旋律:
https://ember-twiddle.com/1c3c6686c49a0c8338e24acc66b05a26
您将看到该checked属性从未出现在所选单选按钮上,但DOM元素和CSS都显示为已选中或已选中.
有谁知道可能导致这种明显冲突的原因是什么？