Javascript Chrome未正确显示iframe和/或过渡_Javascript_Jquery_Css_Iframe_Css Transitions

Javascript Chrome未正确显示iframe和/或过渡

javascript jquery css iframe

Javascript Chrome未正确显示iframe和/或过渡,javascript,jquery,css,iframe,css-transitions,Javascript,Jquery,Css,Iframe,Css Transitions,我有一个小项目，它在safari和firefox中运行良好，但在chrome中却不行。这是我为网络开发的第一个项目之一，所以仍然非常新鲜。我已经做了两份GIF，这将节省我很多解释的时间这在safari中正常工作：但这就是chrome中发生的情况：因此，这并没有达到预期效果。我的第一个想法是iframe和chrome可能会有问题，但据我所知，这些文件是在本地服务器上运行的，不应该有问题。文本没有被向下推，这让我感到困惑，因为它表明css没有被正确解释？正如我所说的，我对这个问题还是新手，

我有一个小项目，它在safari和firefox中运行良好，但在chrome中却不行。这是我为网络开发的第一个项目之一，所以仍然非常新鲜。我已经做了两份GIF，这将节省我很多解释的时间

这在safari中正常工作：

但这就是chrome中发生的情况：

因此，这并没有达到预期效果。我的第一个想法是iframe和chrome可能会有问题，但据我所知，这些文件是在本地服务器上运行的，不应该有问题。文本没有被向下推，这让我感到困惑，因为它表明css没有被正确解释？正如我所说的，我对这个问题还是新手，这是我第一次在不同的浏览器中测试一个项目，所以不确定这个问题对我的项目有多具体。非常感谢您的帮助。P

以下是重现问题所需的完整代码。请记住，除非运行本地服务器，否则chrome无法正常播放iframe。如果你想那样做，那就看你了。我遇到的布局问题与iframe播放与否无关

html:

iframe.html

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript" src="script2.js"></script>

    <link rel="stylesheet" type="text/css" href="styles.css">

</head>
<body>


    <video id="testVid" width="100%">
        <source src="mickey.mp4" type="video/mp4">
    </video>



</body>
</html>

-------------------------------------------------------------编辑----------------------------------------------------------------

我已经删除了“.rect”类中的“left”属性，并添加了display:inline，这解决了chrome显示问题，但现在我的文本中出现了奇怪的空白，如下所示：

我已经确保页面上所有可能的元素、类或id的填充和边距都为零

您希望iframe作为段落的一部分。我没有足够的代码可以使用，但是您可以通过将元素的显示属性设置为

inline block

而不是

block

来确保元素与周围的文本内联。然后，您可能需要删除float属性，可能需要设置相对位置和其他东西来调整对齐

.rect {
  display: inline-block;
}

我不确定您是否在代码中未使用任何

位置

，我尝试了与您使用的相同的类，现在通过删除

float

正如我之前所说，您的css中可能有一些

位置

更新：我根据您的代码进行了更新

$（文档）.ready（函数（）{
$（“#linkID”）。单击（函数（）{
$（“.rect”）.toggleClass（“打开”）；
});
});
html，正文{
最小高度：100；
边际：0px；
}
p跨iframe{
位置：相对位置；
左：50%；
转化：translateX（-50%）；
}
#背景左{
位置：固定；
浮动：左；
宽度：30%；
最小高度：100%；
溢出：隐藏；
}
#背景左图{
位置：绝对位置；
}
#背景图片{
位置：绝对位置；
}
#包裹{
位置：绝对位置；
左：50%；
转换：转换（-50%，0）；
保证金：100像素自动；
宽度：20%；
}
#背景权{
位置：固定；
左：70%；
宽度：30%；
最小高度：100%；
溢出：隐藏；
}
p{
线高：2米；
垂直对齐：顶部；
位置：相对位置；
}
.视频{宽度：100%；}
.链接{
颜色：#d6820e；
光标：指针；
}
.link:悬停{
颜色：#d6460e；
}
iframe{
边界：0无；
}
.直肠{
高度：0px；
宽度：100%；
显示：块；
边际：0px；
填充：0px；
不透明度：0；
过渡性质：全部；
过渡时间：2s；
过渡定时功能：易进易出；
}
.打开{
高度：11.4vw；
宽度：100%；
不透明度：1；
显示：内联块；
}

我的同路人永远坐在那里，但我的改变永远是改革派，我的责任在我身上，还有我的争议。赞成立法，赞成便利，反对，反对。支持eirmod quaerendum，支持epicuri lucilius euripidis。不，不，不，不，不，不，不，不，不。
对现状持异议的意见。这是我的责任。维德勒·阿佩雷特·阿佩雷特·阿佩雷特·阿佩雷特·阿佩雷特·阿佩雷特·阿佩雷特·阿佩雷特·阿佩雷特·阿佩雷特·阿佩雷特·阿佩雷特·阿佩雷特·阿佩雷特·阿佩雷。根据公元前一刻的记载，梅南德里对饮食持不同意见，梅尔迪·托利特（mel id mundi vituperata）。点击我。
我的同路人永远坐在那里，但我的改变永远是改革派，我的责任在我身上，还有我的争议。赞成立法，赞成便利，反对，反对。支持eirmod quaerendum，支持epicuri lucilius euripidis。不，不，不，不，不，不，不，不，不。
对现状持异议的意见。这是我的责任。
维德勒·阿佩雷特·阿佩雷特·阿佩雷特·阿佩雷特·阿佩雷特·阿佩雷特·阿佩雷特·阿佩雷特·阿佩雷特·阿佩雷特·阿佩雷特·阿佩雷特·阿佩雷特·阿佩雷特·阿佩雷。根据公元前一刻的记载，梅南德里对饮食持不同意见，梅尔迪·托利特（mel id mundi vituperata）。

我相信您遇到的一些问题是由于混合了显示：块和显示：内联块
从.rect
中删除float属性和从.open
中删除display属性将导致以下结果，这些结果似乎按预期工作，没有其他更改
.rect{
    height: 0px;
    width: 100%;
    display: block;
    margin: 0px;
    padding: 0px;
    opacity: 0;

    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;
}

.open {
    height: 11.4vw;
    width: 100%;
    opacity: 1;
}

通过浮动.rect元素，可以将其从正常流中移除。显然，Firefox不在乎，但Chrome在乎。尝试在Chrome上不使用浮点。如果我从.rect类中删除了浮点，则无法解决问题，并且会扰乱我的布局。请发布足够的代码来重现该问题。您能为我们提供代码吗？我已上载所有代码。
<!DOCTYPE html>
<html>
<head>
    <title></title>

    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript" src="script2.js"></script>

    <link rel="stylesheet" type="text/css" href="styles.css">

</head>
<body>


    <video id="testVid" width="100%">
        <source src="mickey.mp4" type="video/mp4">
    </video>



</body>
</html> 

.rect {
  display: inline-block;
}

.rect{
    height: 0px;
    width: 100%;
    display: block;
    margin: 0px;
    padding: 0px;
    opacity: 0;

    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;
}

.open {
    height: 11.4vw;
    width: 100%;
    opacity: 1;
}