CSS 布局 刷新会打乱样式

tygg_ylpp 2012-08-17 02:37:42
遇见一个奇怪现象本来有好几个栏目都是共用相同的样式但是偏偏有一个却出现了错误的样式（位置偏移了）？？？
而且刷新了N次后又好了在刷新又会像刚刚开始样出现错位？？？求解
...全文
733 19 打赏 收藏 转发到动态 举报
写回复
用AI写文章
19 条回复
切换为时间正序
请发表友善的回复…
发表回复
tygg_ylpp 2012-11-13
  • 打赏
  • 举报
 回复
我是用一个大的WEN名字 的 DIV包起来的 里面就是几个子DIV 没有定义行高
tygg_ylpp 2012-11-13
  • 打赏
  • 举报
 回复
我没有写什么行高那就是默认的咯
mrRightIce 2012-11-13
  • 打赏
  • 举报
 回复
引用 16 楼 tygg_ylpp 的回复:
引用 14 楼 mrRightIce 的回复:引用 13 楼 tygg_ylpp 的回复: 引用 10 楼 mrRightIce 的回复:服了。。csdn 打开这么慢今天。。。 .wen ul li{ height:20px;} 把这句复制到你的css里面去可否讲下原理呢？？？不是很清楚 原理 就是默认行高了。。某一个认出来的不正规 就那样的 你的……
你仔细看ie8下 你发生问题的地方 的li 的行高 是不对的 用debug 看下 可以看到区别
tygg_ylpp 2012-11-13
  • 打赏
  • 举报
 回复
引用 14 楼 mrRightIce 的回复:
引用 13 楼 tygg_ylpp 的回复: 引用 10 楼 mrRightIce 的回复:服了。。csdn 打开这么慢今天。。。 .wen ul li{ height:20px;} 把这句复制到你的css里面去可否讲下原理呢？？？不是很清楚 原理 就是默认行高了。。某一个认出来的不正规 就那样的
你的意思是说我的DIV没有写规范吗？？？是这么个意思不？不懂这和那个行高有什么关系呀？
mrRightIce 2012-11-13
  • 打赏
  • 举报
 回复
引用 12 楼 tygg_ylpp 的回复:
????? .wen ul li{ height:20px;} 方法可行、、、 麻烦可否告诉我原理？？？？谢谢
话说给我个分呗。。。
mrRightIce 2012-11-13
  • 打赏
  • 举报
 回复
引用 13 楼 tygg_ylpp 的回复:
引用 10 楼 mrRightIce 的回复:服了。。csdn 打开这么慢今天。。。 .wen ul li{ height:20px;} 把这句复制到你的css里面去可否讲下原理呢？？？不是很清楚
原理 就是默认行高了。。某一个认出来的不正规 就那样的
tygg_ylpp 2012-11-12
  • 打赏
  • 举报
 回复
引用 10 楼 mrRightIce 的回复:
服了。。csdn 打开这么慢今天。。。 .wen ul li{ height:20px;} 把这句复制到你的css里面去
可否讲下原理呢？？？不是很清楚
tygg_ylpp 2012-11-12
  • 打赏
  • 举报
 回复
????? .wen ul li{ height:20px;} 方法可行、、、 麻烦可否告诉我原理？？？？谢谢
Wicho开源开发中 2012-11-12
  • 打赏
  • 举报
 回复
可以采用横和竖的布局
mrRightIce 2012-11-12
  • 打赏
  • 举报
 回复
服了。。csdn 打开这么慢今天。。。 .wen ul li{ height:20px;} 把这句复制到你的css里面去
mrRightIce 2012-11-12
  • 打赏
  • 举报
 回复
你还在么？回复下我告诉你怎么改
tygg_ylpp 2012-11-12
  • 打赏
  • 举报
 回复
正常的情况
tygg_ylpp 2012-11-12
  • 打赏
  • 举报
 回复
我真的搞不懂为什么在FF 谷歌 opera 下都行但是在IE8 IE9都不行都会出现错位在IE10下显示亦正常
tygg_ylpp 2012-11-12
  • 打赏
  • 举报
 回复 
 <div class="wen"> <img src="images/wen.gif" />

        <div class="teacher">

          <!--<ul class="images">

			<img src="images/2_003.jpg" >

			<img src="images/a_003.jpg" ><br>

			<img src="images/1.jpg" ></ul>-->

          <ul class="ahref">

            <li><a href="#">音乐学科带头人：陈碧琴</a></li>

            <li><a href="#">全国师德标兵：但卫民</a></li>

            <li><a href="#">南粤优秀教师：林红</a></li>

            <li><a href="#">中青年骨干教师：毛宇宏</a></li>

            <li><a href="#">中青年骨干教师：麦蔼玲</a></li>

            <li><a href="#">中青年骨干教师：麦蔼玲</a></li>

            <li><a href="#">中青年骨干教师：麦蔼玲</a></li>

          </ul>

        </div>

        <div class="view">

          <!--<ul class="images">

			<img src="images/1_006.jpg">

			<img  src="images/a_002.jpg" ><br>

			<img  src="images/2.jpg" >

			</ul>-->

          <ul class="ahref">

            <li><a href="#">儿童美术教育锁谈</a></li>

            <li><a href="#">浅谈幼儿美术教育</a></li>

            <li><a href="#">如何对幼儿进行美术教育</a></li>

            <li><a href="#">英国式少儿创意绘画</a></li>

            <li><a href="#">幼儿美术教育误区及建议</a></li>

            <li><a href="#">幼儿美术教育误区及建议</a></li>

            <li><a href="#">幼儿美术教育误区及建议</a></li>

          </ul>

        </div>

        <div class="heath">

          <!--<ul class="images">

			<img  src="images/3_003.jpg" >

			<img  src="images/1_005.jpg" ><br>

			<img  src="images/2_006.jpg" >

			</ul>-->

          <ul class="ahref">

            <li><a href="#">幼儿教育不可错</a></li>

            <li><a href="#">让宝宝更聪明的</a></li>

            <li><a href="#">小小中草药 孩子</a></li>

            <li><a href="#">让宝宝胆子大起</a></li>

            <li><a href="#">父母教育孩子应个</a></li>

            <li><a href="#">父母教育孩子应个</a></li>

        	    <li><a href="#">父母教育孩子应个</a></li>

          </ul>

        </div>

     <div class="happy">

          <!--<ul class="images">

			<img  src="images/3_002.jpg" >

		<img  src="images/1_002.jpg" ><br>

			<img  src="images/2_005.jpg" >

			</ul>-->

          <ul class="ahref">

            <li><a href="#">宝宝最喜欢的“玩手”游戏</a></li>

            <li><a href="#">如何让宝宝变成社交小达人</a></li>

            <li><a href="#">应禁止孩子在七岁前玩电脑</a></li>

            <li><a href="#">让宝宝爱上阅读的5种妙法</a></li>

            <li><a href="#">三岁孩子慢跑值得推荐</a></li>

            <li><a href="#">三岁孩子慢跑值得推荐</a></li>

            <li><a href="#">三岁孩子慢跑值得推荐</a></li>

          </ul>

        </div>

		

      <div class="national">

          <!--<ul class="images">

			<img  src="images/1_004.jpg" >

			<img  src="images/a.jpg" ><br>

			<img  src="images/2_002.jpg" >

			</ul>-->

          <ul class="ahref">

            <li><a href="#">幼儿英语学习最佳时间</a></li>

            <li><a href="#">幼儿英语学习特点</a></li>

            <li><a href="#">幼儿英语教学方法</a></li>

            <li><a href="#">英国教育见闻</a></li>

            <li><a href="#">法国教育见闻</a></li>

            <li><a href="#">法国教育见闻</a></li>

            <li><a href="#">法国教育见闻</a></li>

          </ul>

        </div>

		

		

        <div class="baby">

          <!--<ul class="images">

			<img  src="images/1_003.jpg" >

			<img  src="images/3.jpg" ></a><br>

			<img  src="images/2_004.jpg" ></a>

			</ul>-->

          <ul class="ahref">

            <li><a href="#">蓓蕾宝宝</a></li>

            <li><a href="#">蓓蕾宝宝</a></li>

            <li><a href="#">蓓蕾宝宝</a></li>

            <li><a href="#">蓓蕾宝宝</a></li>

            <li><a href="#">蓓蕾宝宝</a></li>

            <li><a href="#">蓓蕾宝宝</a></li>

            <li><a href="#">蓓蕾宝宝</a></li>

          </ul>

        </div>

		 

		

		

		

      </div>

.wen{

/*clear:both;*/

/*background-color:#CCFF00;*/

float:left;

text-align:left;

width:606px;

margin:0px;

padding:0px;

}



.wen .teacher,.wen .view,.wen .heath,.wen .happy,.wen .national,.wen .baby

{



float:left;

width:293px;

margin:0px 10px 0px 0px;

background: url(../images/blms.gif) no-repeat 0px 0px;

padding:0px;

}

.wen .view{background:url(../images/sjbl.gif) no-repeat 0px 0px;}

.wen .heath{background:url(../images/jkbl.gif) no-repeat 0px 0px;}

.wen .happy{background:url(../images/klbl.gif) no-repeat 0px 0px pink;}

.wen .national{background:url(../images/gjbl.gif) no-repeat 0px 0px gray;}

.wen .baby{background:url(../images/blbd.gif) no-repeat 0px 0px yellow;}












月夜csdn 2012-08-18
  • 打赏
  • 举报
 回复
楼上头像太彪悍，不敢恭维啊。不过，这个方法还是蛮不错的。学习了。。。
TVBee 2012-08-17
  • 打赏
  • 举报
 回复
嗯如果是二楼三楼说的情况，我一般会在dm里分别搜索<div和</div，看看数目是否一样多，如果不一样多的话，就是有未闭合的标签。
cleverangelx 2012-08-17
  • 打赏
  • 举报
 回复
是不是html中有未闭合的标签，
cleverangelx 2012-08-17
  • 打赏
  • 举报
 回复
是不是html中有未闭合的标签，
未知数 2012-08-17
  • 打赏
  • 举报
 回复
这样问神仙才知道什么问题...
页面刷新经常出现样式排版乱掉
 页面刷新经常出现样式排版乱掉，原因是css文件在js文件之后引入，会出现dom渲染完，但css还未加载，所以进行引入时，一定要严格按照先引入js文件，再引入css文件。...
浏览器缩放，会导致布局打乱，解决方法？/一缩小网页布局就打乱了怎么办？
原因通常就是你的元素浮动了，最好设置个最小宽度min-width:具体宽度值 px;，如果你需要自适应，用media查询 有些地方不写死的话可以用min-width和max-width来限制一下。不然你父容器用百分比设置宽度，而子元素用固定的px设置宽度，当你父容器缩小到一定程度的时候肯定容不下固定宽度的子元素。如果想百分比和固定宽度混用的话最好设置一下min-width和max-wid
react项目css样式错乱，带来的思考
1.为什么出现了错乱？ 起初，项目中的每个组件的样式使用less语法写的，为了避免编译后，出现样式覆盖的问题。元素的类名使用的是文件名打头 。后来，我引入了ant-desginUI框架。结果发现，由它带来的重置css样式，覆盖了我自己的css样式。 覆盖的根本原因是：我自己的css样式，是被webpack编译到main.css文件中的，由link标签引入的。而ant-desgin带来的css样式...
Web前端技术分享：网页排版布局常见问题汇总
页面布局的选择是用户能够直观感受到的第一印象，简洁大方能够让用户更快速的在网站找到想要的资源，但往往一些新手web前端开发者经常会出现一些排版上面的问题，今天小千就来给大家总结一下，提供给大家参考。 1、每行文字太多 用户在阅读许多行文字时间久了会引起眼睛的疲劳，在从一行到另一行时读者不得不经常移动他们的眼睛和头部，而这种让人疲惫的布局模式是不受欢迎的,经网络有关调查表明每行文字保持文字在50 - 60个字符以下,看起来最为舒适,那这就要求在进行文字描述的时候尽可能的简洁简短。 2、没有足够的行间距 行间
html,css,http面试题
如何水平垂直居中一个元素 text-algin:center;line-height:height popsition:absolute;left:50%;top:50% display:flex;margin:auto link和@import的区别 link属于html标签。@import在css中使用表示导入外部样式表；页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载; import只在IE5以上才能识别，而link是HTML标签，无兼容问题; l
CSS

61,112

社区成员

60,730

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章