我正在开发一个网页,它嵌入来自iframe内不同域的其他网页.此页面的内容完全符合iframe,因此没有溢出的内容,也没有滚动条.但是,可以使用鼠标滚轮缩放内容.
但在Safari和Chrome中,使用鼠标滚轮进行缩放也会滚动整个页面.我不希望这种滚动发生 - 只是缩放iframe.当鼠标悬停在iframe上时,如何停止滚动?
我试图在JSFiddle的最小例子中重新创建问题:https://jsfiddle.net/twodee/57a68k3h .当我缩放绿色iframe时,文本会缩放,但页面也会滚动.
frame = document.getElementById('myframe');
frame_child = document.createElement('div');
var font_size = 12;
frame_child.addEventListener('wheel', function(e) {
font_size += e.wheelDelta;
frame_child.style.fontSize = font_size + 'px';
});
frame_child.style.width = '190px';
frame_child.style.height = '190px';
frame_child.innerHTML = 'this text should zoom';
frame.contentWindow.document.body.appendChild(frame_child);Run Code Online (Sandbox Code Playgroud)
#myframe {
background-color: #00FF00;
}Run Code Online (Sandbox Code Playgroud)
<ul>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
</ul>
<div>
<iframe id="myframe" …Run Code Online (Sandbox Code Playgroud)在Android偏好设置方面,我试图围绕持久性.有一个持久的属性,可以是true或false.如果为true,则首选项将提交给共享首选项.如果偏好不持久,如何使用偏好?
我正在尝试使用 CSS 网格布局构建一个表单。标签显示在左列中,输入显示在右列中。该align-items属性设置为baseline。在 Chrome 中,标签和输入的文本在其基线上垂直对齐。但在 Firefox v94 中,标签的位置高于输入中的文本。
这是该问题的最小可重现示例:
<!DOCTYPE html>
<html>
<head>
<style>
.login-grid {
display: grid;
grid-template-columns: auto 1fr;
grid-gap: 10px 2px;
align-items: baseline;
}
label, input {
font-size: 3em;
}
</style>
</head>
<body>
<div class="login-grid">
<label>username</label>
<input type="text">
</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
此示例已在Codepen上发布。
当我将输入包装在 a 中时div,文本确实跨列对齐。我不想这样做,因为嵌套会影响尺寸。
我已经检查了许多关于对齐问题的其他帖子,但我没有找到与 CSS 网格相关的帖子。