div中嵌入一个视频框,在IE浏览器中可以正常显示,但是别的浏览器比如谷歌会出现错位。 20C

图片说明图片说明图片说明图片说明

页面是普通的html,前端用的是bootstrap,感觉这个跟什么框架应该没什么关系。
没有用其他什么样式,整个样式就在页面里面写的,就是如图所示,就写了这么几句话的样式。这个视频是别的公司做的视频监控,我把它嵌入到我们页面中,他们公司给的页面也简单,样式也就这么几句话我拿过来只是调整了一下这个框的大小。但是无论怎么调整,这个视频框在谷歌或者其他浏览器(像360什么)都不在预期的位置,也不知道这是怎么搞得。。。这个情况我也是第一次遇到,搜我都不知道该怎么搜。。。还望哪位大神能解决一下!如果有描述不清楚的,还请提出,我再补充。
下面是html页面:

html, body {
    padding: 0;
    margin: 0;
}
.playWnd {


    width: 100%;
    height: 700px;
    border: 1px solid red;
}
.cbInfoDiv {
    float: left;
    width: 360px;
    margin-left: 16px;
    border:1px solid #7F9DB9;
}
.cbInfo {
    height: 200px;
    padding: 5px;
    border: 1px solid #7F9DB9;
    overflow: auto;
    word-break: break-all;
}
.operate {
    margin-top: 24px;
}
.operate::after {
    content: '';
    display: block;
    clear: both;
}
.operate .btns {
    height: 32px;
}
.module {
    float: left;
    width: 340px;
    min-height: 320px;
    margin-left: 16px;
    padding: 16px 8px;
    box-sizing: border-box;
    border: 1px solid #e5e5e5;
}
.module .item {
    margin-bottom: 4px;
}
.module .label {
    width: 150px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    text-align: right;
}
.module input[type="text"],
.module select {
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
    margin-left: 0;
    width: 150px;
    min-height: 20px;
}
.module .btn {
    min-width: 80px;
    min-height: 24px;
    margin-top: 16px;
    margin-left: 158px;
}

```<body>
<div class="main_content">
    <div class="ny_title">
        <span>视频查询</span>
        <div class="bg"></div>
    </div>
    <div class="main_table" style="height: 90%">
        <div class="col-xs-3 col-md-2 col-lg-2 left_tree">
            <ul class="tree" id="treeList">
                <li>
                    <span></span>
                    <ul>
                        <li class="one"><span>正在获取市场信息...</span>

                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <div  class="col-xs-9 col-md-10 col-lg-10" >
            <div id="playWnd" class="playWnd"   >


            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>
</body>

类似这个col-xs-9应该是bootstrap自己的

4个回答

图片说明
我这演示没问题

qq_28501497
双子叶大神 回复骑乌龟干宝马: 我玩的无多
5 个月之前 回复
m0_37540107
骑乌龟干宝马 整个页面代码都在上面,除了引入js什么没写,页面其他样式都放上了
5 个月之前 回复

这个视频框应该是使用了绝对定位

像这样

#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
把这个属性去掉

图片说明
把这句去掉试试看

m0_37540107
骑乌龟干宝马 也还是不行哎,去掉,放上面,下面那哥们说的再加一个都试过不行。。。
5 个月之前 回复
qq_28501497
双子叶大神 51516
5 个月之前 回复
m0_37540107
骑乌龟干宝马 没有用到哎
5 个月之前 回复

在playWnd之前也插入一个clearfix试试

<div  class="col-xs-9 col-md-10 col-lg-10" >
                    <div class="clearfix"></div>
            <div id="playWnd" class="playWnd"   >


            </div>
            <div class="clearfix"></div>
 </div>
m0_37540107
骑乌龟干宝马 还是不行哎,去掉,加两个,再换个位置我都试过。。
5 个月之前 回复

是 playWnd这个框跑了还是,里面的内容跑了,
你这个框里面是调用的一个c++的插件,还是就是一个播放器,
另外你嵌入的方式是直接把 代码粘过来还是iframe嵌套过来的或者ajax直接load进去的,
暴力点的方法是 playWnd position: relative; 里面内容 position:absolute; top:0;left:0 强制定位,
正常应该看看可能是某个属性影响了可能是清除浮动影响,你可以把框部分的内容重新 看看用float排版,定高宽,看看还会出现不
另外如果是qt图形界面需要调整 引用的那个标签的属性 修改方式基本与 cssstyle 的方法一致

qq_43137221
冰·羽 回复骑乌龟干宝马: 可不可以外网访问看一看
5 个月之前 回复
m0_37540107
骑乌龟干宝马 不知道是什么插件写的,是海康威视的8700视频监控插件,问他们说跟插件没什么关系,样式什么要我们自己调,你说的强制定位也试过,在谷歌里面还是不起作用。。。
5 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!