• 所有问题

    • web前端工程师工作中遇到难以解决的问题

    如题所述

    举报该问题
    推荐答案   2017-06-01
    1）.margin-top,margin-bottom不能正常显示时
    一.有时会遇到外层中的子层使用margin-top不管用的情况；这里我们需要在子层的前后加上一个
    div{height:0;overflow:hidden;}
    例
    CSS样式表中：
    #box {background-color:#eee;}
    #box p {margin-top: 20px;margin-bottom: 20px;text-align:center;}
    解决方法：在P标签前后各加2个空的div：<divstyle="height:0;overflow:hidden"></div>
    二.网页中头部，中部，底部的居底部有时给个margin-bottom:10px;不管用也是要给个清除属性的.clear{clear:both;font-size:0;line-height:0;}在底部<div id="footer"></div>下加个<div></div>
    2）.div层中高度自适应问题
    网页前端科技人员在设计网页时不可能知道客户在要他们自己的网站内容页里加多少文字或图片内容
    这时我们就不能规定div层的高度，为此应写成min-height:200px;height:auto!important;height:
    200px;overflow:visible;这样ie7,ff,ie6浏览器的高度自适应问题就解决了，这些在
    http://www.xueshengshu.com/网站中用到最多了。
    3）.div层中子层的居底部对齐问题
    div中的定位问题有很多也很麻烦，但弄懂了就OK了，在一个大的div层中如何让子层的内容居底部
    对齐就涉及到了position定位问题；
    例
    div层#box{position:relative;border:1px solidred;width:600px;hegiht:400px;}
    div子层#box .wrap{position:absolute;bottom:0;border:1px dashedblue;width:200px;height:
    100px},最近写的网站中http://www.msgc.net.cn/就用到了
    4）.div层中清除clear属性的一小部分应用
    在div中一个大的层里面有很多子层，若是加上边框在ie7、ie6中或许会正常显示，但是在ff中可能
    只会成一条线了，此时在最外层的后面加上<div style="clear:both"></div>或者设 .wrapfix:after{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }后在每个浮动外框调用wrapfix；http://www.xueshengshu.com学生书网里用到最多了。
    5）.解决IE8下div移位、错位等兼容性问题
    在<head>标签后面的第一句话加上<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />就OK了
    6）.单行文字居中与字体样式问题
    在div中一个层中只有一行文字，要让这层中的文字居中，可设line-height的高度和层的高度一样，注意这一层中的文字不能换行，此外，设了line-height时再给定字体样式font:bold 14px "宋体";这时要把font:bold 14px "宋体";放在line-height的前面，否则字体样式不显示文字也不居中；或者将font:bold 14px "宋体";改成font-size:16px;font-weight:bold;font-family:"宋体";就OK了。
    7）.鼠标滑上去的特殊效果
    往往为了达到显眼的效果，我们会写到一些好看的效果，方法一在样式表中写：ul li a{border:1px solid red;}ul li a:hoverimg{filter:alpha(opacity=40在ul标签中调用即可方法二：在样式表中写上：.hover img{filter:alpha(opacity=40);}在div中调用onmouseover="this.className='hover'"onmouseout="this.className=this.classtype"即可
    8）.IE6中高度不对问题
    今天在div中给定了高度为1px,其它浏览器显示正常，可是ie6中显示的高度就不对了，这时我给样式表中加了个font-size:0px;line-height:0px;就好了
    9）.ul在外框里margin-top不起作用的问题
    在div大框子里用了ul作导航的时候为了合ul层居中显示，设ul的样式表为margin-top:-15px不起作用了，此时应该将div大框设定高度后给个line-height与height一样的高度，ul层就自动居中了。
    例如http://www.hopes-home.cn/main.aspx
    10）.ff中margin-top有时不起作用的问题
    今天头晕脑涨的把这问题给解决了，这几天写标网都有累似问题，可是一直都是换个写法解决的，今天的这个办法也不只可行试试还是可以的，在一个div外框层中给个宽度例如，#div_wrap{width:280px;height:100%;}
    其次在这个框子里设一个.div_top{widh:100%;font:bold12px "宋体";height:24px;line-height:24px;}
    .div_center{border:1px solid#dbdbdb;border-top:none;background:#fff;min-height:460px !important;height:auto!important;height:460px;overflow:visible;}
    最后在这个div_center里套个ul li时经常会在ff中出问题，也就是在div_top与div_center中莫名的多了几个像素的空格，这时给ul样式表设个display:inline-table即可；
    温馨提示：答案为网友推荐，仅供参考
    相似回答
    大家正在搜
    相关问题
    web前端工程师工作中,遇到难以解决的问题有哪些?
    初入Web前端职场的新人怎么解决工作中遇到的问题
    web前端开发常遇到的问题有哪些？
    web前端开发常遇到的问题有哪些
    前端开发时遇到过什么坑
    本人web前端开发工程师，技术遇到瓶颈.怎么才能不断提高自己
    如何解决前端开发中遇到的这些问题
    我是一名web前端的开发工程师，却苦恼没有合适的工作。我现在...