当我在css过渡中使用填充时,webkit浏览器(safari osx,Chrome osx和Chrome窗口)在每个过渡的开始和结束时都会有一点小故障,导致在动画元素之后放置1px元素.
HTML
test test test <span class="test">Hover me</span> test test test test
CSS
.test{
color:#FFF;
background:#000;
padding:4px 4px 4px 30px;
transition: padding 0.5s linear;
}
.test:hover{
padding:4px 30px 4px 4px;
}
我搜索并尝试了各种解决方案,但没有解决这个例子的问题？! CSS过渡故障 CSS过渡效果使图像模糊/移动图像1px,在Chrome？
(示例填写了可能的解决方案:http://jsfiddle.net/QG4QV/18/,但没有任何作用)
在Google Chrome（或firefox）中使用rem单元时，结果出乎意料。我设置了一个页面，其根字体大小设置为10px，以使其更容易将基于像素的设计转换为html / css。
这是我的CSS。我的期望是页面上有一个500像素宽的框，如果屏幕宽于500像素，则背景应该变成红色。
html {
font-size: 10px;
}
@media screen and (min-width: 50rem){
body{
background-color: red;
}
}
.test{
width: 50rem;
background: black;
height:100px;
}
但是，尽管两个值均定义为50rem，但结果是一个500px宽的框，页面在800px处变为红色。
https://jsfiddle.net/tstruyf/puqpwpfj/4/
我在做什么错？为什么？
我在 Mac 上使用 Chrome 65。我在 Chrome 中的“源 > 文件系统”选项卡下设置了一个工作区。我可以编辑文件，Chrome 会将这些更改保存到我磁盘上的实际文件中。但我想使用“元素”选项卡的实时编辑功能来更改 HTML 和 CSS，并让 Chrome 保存这些更改。
我找到了很多答案，但没有一个适用于当前版本的 Chrome。
我在iFrame中使用jQuery时遇到问题.
这是我的测试设置:
index.html的:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#A").contents().find('#B').addClass('Z');
});
</script>
</head>
<body>
<iframe id="A" src="test.html" style="width:700px; height: 1000px;" frameborder="0"></iframe>
</body>
</html>
的test.html:
<html>
<head>
<title>test</title>
</head>
<body>
<div id="B">testcontent</div>
</body>
</html>
通常在加载页面时,在源中,"Z"应该作为类添加,但它不会.有谁知道问题可能是什么？两个文件都在同一(本地)文件夹中.