margin-left:10px; 不同浏览器距离为什么不一样?

本文探讨了Internet Explorer浏览器中一个关于margin值被双倍计算的已知问题,特别是当元素设置为浮动时。文中提供了一个简单而有效的解决方案:通过将浮动对象的display属性设置为inline,可以避免此问题。
这是一个ie的bug.. 如果你设置margin对象是浮动的。ie就会把你设置的值双倍处理。。可以设置浮动对象的 display:inline  解决

转载于:https://www.cnblogs.com/ada-zheng/p/4110604.html

body { padding: 0; margin: 0 } #unity-container { position: absolute } #unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) } #unity-container.unity-mobile { position: fixed; width: 100%; height: 100% } #unity-canvas { background: {{{ BACKGROUND_COLOR }}} } .unity-mobile #unity-canvas { width: 100%; height: 100% } #unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none } #unity-logo { width: 154px; height: 130px; background: url('webgl-logo.png') no-repeat center } #unity-progress-bar-empty { width: 1000px; height: 18px; margin-top: 10px; margin-left: 6.5px; background: url('frame_gaojing_nomal@2x.png') no-repeat center } #unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat center } #unity-footer { position: relative } .unity-mobile #unity-footer { display: none } #unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px } #unity-fullscreen-button { cursor:pointer; float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center } #unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }我需要#unity-logo { width: 154px; height: 130px; background: url('webgl-logo.png') no-repeat center }这个logo在应用中间 然后#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat center }这个进度会从0到100加载 是一整条过去显示
08-08
<body class="bodystyle"> <div id="append_parent"></div> <div id="ajaxwaitid"></div> <div class="page atta"> {include file="seo/bar" /} <div class="seo-right {if condition='2 != $config.seo_pseudo'}none{/if}" id="seo_right_uphtml"> <style> .seo-right{ right: 30px; width: 90%; background-color:#fff; z-index:666666; border-radius: 4px; height: 810px; } .seo-html dt.tit { width: 60px; padding-left:20px; } </style> <style> li { list-style: none; } .box { position: relative; display: inline; left: 150px; } .top { height: 20px; position: relative; margin-bottom:20px; } .top input { width: 100px; height: 20px; font-size: 25px; padding: 0 20px; border: 1px solid #d1ccd0; outline: none; } .top .blue { border: 2px solid #409eff;; } .top .size { width: 16px; height: 16px; position: relative; top: 50%; left: -30px; margin-top: -8px; transform: rotate(180deg); transition: all .5s; color: #d1ccd0; } .top ul { position: absolute; display:flex; font-size: 10px; top: 50%; transform: translateY(-50%); left: 15px; z-index: 99; } .top ul li { border-radius: 5px; display: none; margin-top: 20px; font-size: 14px; } .arr1{ margin-left: 20px; } .list { width: 100%; height: 430px; margin-top: 5px; background-color:#fff; /* 超出隐藏,需要时加滚动条*/ overflow: auto; position: relative; display: block; z-index:99; } /* 隐藏滚动条 */ .list::-webkit-scrollbar { display: none; } .list-ul { width: 100%; } .header{ background-color: #f7f7f7; clear: both; position: relative; z-index: 1; } .header th{ white-space: nowrap; cursor: default; border-right: 2px solid #fff; box-sizing: border-box; line-height: 35px; } .list-ul > span { flex: 0 0 33.33%; box-sizing: border-box; min-width: 300px; } .list ul { display: flex; flex-direction: column; margin: 8px 0; } .list ul li { display: flex; height: 27px; align-items: center; padding: 0 10px; color: #65676b; cursor: pointer; } .list ul li:hover { background-color: #f5f8ff; } .list ul li label { font-size: 10px; margin-left: 15px; display: block; width: 100%; } .fontBlue { color: #0075ff; } #input1{ width: 300px; height: 30px; padding-right: 6px; padding-left: 6px; padding-top: 4px; padding-bottom: 4px; border: 1px solid #d1ccd0; border-radius: 4px; font-size: 14px; color: #333; margin-bottom: 10px; } #searchInput { width: 136px; height: 20px; padding-right: 6px; padding-top: 4px; padding-bottom: 4px; border: 1px solid #d1ccd0; border-radius: 4px; font-size: 14px; color: #333; margin-right: 20px; } #path-select,#online-status-select,#domain-type-select{ width: 150px; height: 30px; padding-right: 6px; padding-top: 4px; padding-bottom: 4px; border: 1px solid #d1ccd0; border-radius: 4px; font-size: 14px; color: #333; margin-right: 20px; margin-bottom:10px; } table { border-collapse: collapse; } tr { border-bottom: 1px solid #f7f7f7; line-height: 48px; } #temp-select, #temp-type-select{ width: 150px; height: 30px; padding-right: 6px; padding-top: 4px; padding-bottom: 4px; border: 1px solid #d1ccd0; border-radius: 4px; font-size: 14px; color: #333; margin-right: 20px; margin-bottom: 10px;; } #queryButton{ min-height: 20px; padding: 5px 15px; font-size: 12px; border-radius: 3px; } .partial-upload{ margin-left: 10px; padding: 7px 19px!important; } </style> <div class="page" style="padding: 0px 15px 30px"> <form method="get" id="html_handlepost" name="form2"> <div class="ncap-form-default seo-html" style="display: relative;padding: 10px 0px 30px;"> <dl class="row" style="margin-top: 0px"> <dt class="tit" style="height: 30px;font-size:18px;display:block;"> <label>全部域名:</label> </dt> <div class="template_input" style="font-size: 16px;position: relative;left:150px;display:inline-block;margin-bottom:27px;"> <em style="color:#F60;font: bold 14px/20px tahoma, verdana;">*</em> <span>提交template资源文件:</span>   <label for="seo_upload_all_yes" class="curpoin"> <input type="radio" id="seo_upload_all_yes" name="seo_upload_all" value="1"> 是 </label> <label for="seo_upload_all_no" class="curpoin"> <input type="radio" id="seo_upload_all_no" name="seo_upload_all" value="0" checked> 否 </label> <a href="javascript:void(0);" id="up_site" class="partial-upload ncap-btn ncap-btn-green" style="margin-left: 90px;">一键生成全部域名并上传到s3</a> </div> <dd class="opt w0" style="position:relative;left:150px;"> <span class="err"></span> <p class="notic"></p> </dd> </dl> <dl class="row" style="border-top: 1px solid rgb(238,238,238);background-color:#fff;padding-top:23px;display:inline-block;width:100%;margin-bottom:20px;"> <dt class="tit" style="height: 30px;font-size:18px;display:block;">部分域名:</dt> <div class="template_input" style="font-size: 16px;position: relative;left:150px;display:inline-block;margin-bottom:30px"> <em style="color:#F60;font: bold 14px/20px tahoma, verdana;">*</em> <span>提交template资源文件:</span>   <label for="seo_upload_yes" class="curpoin"> <input type="radio" id="seo_upload_yes" name="seo_upload" value="1"> 是 </label> <label for="seo_upload_no" class="curpoin"> <input type="radio" id="seo_upload_no" name="seo_upload" value="0" checked> 否 </label> <a href="javascript:void(0);" id="up_article_multiple" class="ncap-btn ncap-btn-green partial-upload" style="margin-left: 90px;">一键生成所选域名并上传到s3</a> <a href="javascript:void(0);" id="down_article_multiple" class="ncap-btn ncap-btn-green partial-upload" style="margin-left: 45px;">一键下线所选域名</a> </div> <div class="top" style="left:150px;margin-bottom:19px;display: inline-block;margin:0px;"> <input type="text" name="" id="input1" style="display:none;"> <input type="text" id="searchInput" placeholder="域名名称"> <select id="path-select"> <option value="0">域名类型</option> <option value="1">一级</option> <option value="2">二级</option> </select> <select id="online-status-select"> <option value="0">是否上线</option> <option value="1">是</option> <option value="2">否</option> </select> <select id="domain-type-select"> <option value="0">域名类型</option> <option value="1">游戏</option> <option value="2">电商</option> <option value="3">资讯 - 金融</option> <option value="4">资讯 - 科技</option> </select> <select id="temp-type-select"> <option value="0">模板类型</option> <option value="1">info</option> <option value="2">game</option> <option value="3">ecommerce</option> </select> <select id="temp-select"> <option value="0">模板名称</option> </select> <button type="button" id="queryButton">查询</button> <ul style="display:none;"> <li class="change"></li> <li class="arr1"></li> </ul> </div> <dd class="opt w0" style="margin: 30px;"> <div class="box hDivBox"> <div class="list hDiv"> <div class="list-ul hDivBox" style=" overflow-x: auto; width:1500px;"> <table class="header" cellpadding="0" cellspacing="0" style="width: 100%;"> <thead> <tr> <th class="sign w50" axis="col0"> <div class="tc"><input type="checkbox" onClick="toggleCheckboxes(this)" autocomplete="off"></div> </th> <th axis="col3" class="w300"> <div class="sundefined tc">域名名称</div> </th> <th axis="col1" class="w100"> <div class="tc">二级域名</div> </th> <th axis="col1" class="w100"> <div class="tc">上线状态</div> </th> <th axis="col1" class="w160"> <div class="tc">多级目录地址</div> </th> <th axis="col2" class="w160"> <div class="tc">域名类型</div> </th> <th axis="col2" class="w160"> <div class="tc">模板类型</div> </th> <th axis="col2" class="w200"> <div class="tc">模板名称</div> </th> <th axis="col1" class="w200"> <div class="tc">创建时间</div> </th> <th axis="col1" class="w200"> <div class="tc">上次修改时间</div> </th> </tr> </thead> </table> <table class="flex-table autoht" cellpadding="0" cellspacing="0" border="0" id="arctype_table" style="width: 100%"> <tbody class="flex-tbody"></tbody> </table> </div> </div> </div> <p class="notic"></p> </dd> </dl> <dl class="row" style="display: none;"> <dt class="tit">栏目页</dt> <dd class="opt w0"> <select name="html_typeid" id="html_typeid" style="width: 150px;"> <option value="0">所有栏目…</option> {$select_html} </select>  <a href="javascript:void(0);" id="up_channel" class="ncap-btn ncap-btn-green">一键生成</a> <p class="notic"></p> (功能已弃用) </dd> </dl> </div> </form> </div> 这个dd元素已经超出了我的整体范围,导致有一些内容变的可见了,所以我现在应该怎么办,目前可以实现上下滑动来查看,但是左右滑动实现了,我希望使用换行的方式来解决 dd class="opt w0" style="margin: 30px;">
08-06
我用的是eyoucms,现在由于是自适应的问题,图片和标题的问题倒是样式没对齐,请帮我对齐一下,下面是代码 <div class="page-main"> <div class="newslist list1"> {eyou:list titlelen='40' loop='12'} <li> <div class="news-img"> <div class="date"><span>{$field.update_time|MyDate='d',###}</span><span>{$field.update_time|MyDate='m',###}</span><span>{$field.update_time|MyDate='Y',###}</span></div> <a href="{$field.arcurl}" class="lazy-wrap"> <img src="{$field.litpic}" data-sizes="361x0 768w,318x0 1024w,249x0 1280w,267x0 1366w,291x0 1440w,342x0 1600w" alt="{$field.title}"/> </a> </div> <div class="news-info"> <a href="{$field.arcurl}" class="title line2">{$field.title}</a> <div class="text line3">{$field.seo_description|html_msubstr=###,0,60,true}</div> <a href="{$field.arcurl}" class="btn" title="{$field.title}"><em class="iconfont icon-jiahao"></em>read more</a> </div> </li> {/eyou:list} </div> <div class="mypages"> <ul> {eyou:pagelist listitem="index,pre,next,end,pageno" listsize="1" /} </ul> </div> </div>,这是css.newslist.list1 li { width: 32%; margin-right: 2% } .newslist.list1 li:nth-child(3n) { margin-right: 0px } .newslist.list1 li .news-info { padding: 20px 0px } .newslist.list1 li .news-img { width: 100%; min-height: 100px; background: #F3F3F3 } .newslist.list0 li { width: 100%; display: flex; align-items: center } .newslist.list0 li .news-img { width: 300px } .newslist.list0 li .news-info { flex: 1; padding: 0px 20px } .newscontent-title { font-size: 28px; font-weight: var(--fontblod5); line-height: 1.2 } .newscontent-date { display: flex; flex-wrap: wrap; align-items: center; padding: 15px 0px; font-size: 15px; color: var(--color) } .newscontent-date span { margin-right: 20px } .newscontent-date span em { margin-right: 5px } .newscontent-details article { padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid #d6d6d6 } .newscontent-details .share-btn-list { justify-content: flex-end }
08-09
<!-- 主要内容区域 --> <view class="main-content flex flex-between"> <view class="area-item" v-for="area in areaList" :key="area.areaId" v-if="area.areaId==mapId"> <!-- 区域图片 --> <image :src="area.image" class="area-img" mode="widthFix"></image> </view> <view class="description-card"> <web-view :src="mapUrl" @message="handleMessage" ref="webviewRef" debug></web-view> </view> <!-- 功能导航 --> <view class="feature-nav" style="z-index: 99999;"> <view class="feature-item" v-for="(item, index) in features" :key="index" @click="navigateToFeature(item.path)"> <text class="feature-title">{{item.title}}</text> </view> </view> </view>/* 主要内容区域 */ .main-content { padding: 40rpx 80rpx; margin-top: 20rpx; gap: 20rpx; display: flex; position: relative; } .area-item { width: 156rpx; height: 238rpx; position: absolute; left: 5%; top: 8%; z-index: 9999; } .area-img { width: 100%; height: 100%; } /* .description-card { width: 80%; height: 420px; border-radius: 25px; position: relative; border: 8px solid; border-image: linear-gradient(180deg, #E3383B 0%, #E3393B 1%, #F47C58 100%) 8; } */ .description-card { width: 70%; height: 600px; position: relative; z-index: 0; overflow: hidden; } /* 创建渐变边框 */ .description-card::before { content: ""; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; background: linear-gradient(180deg, #E3383B 0%, #F47C58 100%); border-radius: 60rpx; z-index: -1; } /* 功能导航 */ .feature-nav { flex: 1; min-width: 180rpx; display: flex; align-items: center; flex-direction: column; justify-content: space-around; margin-left: 20rpx; } .feature-item { font-family: 'ShuHuiTi'; width: 80%; text-align: center; line-height: 120rpx; cursor: pointer; background-image: url('/static/images/border.png'); background-position: center; background-repeat: no-repeat; background-size: 100% 100%; } .feature-title { display: block; font-size: 70rpx; font-weight: bold; color: #FF4444; } 为什么浏览器查看h5正常,在模拟器查看app只有地图
最新发布
08-19
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值