web前端⼯程师⼯作中遇到难以解决的问题
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：<div></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浏览器的⾼度⾃适应问题就解决了，这些在
⽹站中⽤到最多了。
3）.div层中⼦层的居底部对齐问题
div中的定位问题有很多也很⿇烦，但弄懂了就OK了，在⼀个⼤的div层中如何让⼦层的内容居底部
对齐就涉及到了position定位问题；
web前端和java哪个难例
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}，最近写的⽹站中就⽤到了
4）.div层中清除clear属性的⼀⼩部分应⽤
在div中⼀个⼤的层⾥⾯有很多⼦层，若是加上边框在ie7、ie6中或许会正常显⽰，但是在ff中可能
只会成⼀条线了，此时在最外层的后⾯加上<div ></div>或者设 .wrapfix:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}后在每个浮动外框调⽤wrapfix；学⽣书⽹⾥⽤到最多了。
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中调⽤
οnmοuseοver="this.className='hover'"οnmοuseοut="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层就⾃动居中了。
例如
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即可；
11）.list-style-image的⽤法
div中经常⽤到新闻列表前⾯有图标的样式，有两种简单的⽅法
⼀.可以写成ul.menu{width:100%;} ul.menuli{background:url(em_img/small_icon.jpg) 5px center no-repeat;list-style-position:inside;padding-left:18px;}即可在各浏览器正常显⽰
⼆. 可以设ul.menu{width:80%;} ul.menuli{list-style-image:url(em_img/small_icon.jpg); }
此时新闻列表前的⼩图标即可在ie6，ie7，ie8,ff中都正常显⽰但，ie6需要不断的刷新才能正常显⽰⼩图标；
12）.
IE6 li:hover兼容问题
IE6 li:hover兼容问题
<scripttype="text/javascript"><!--//--><![CDATA[//><!--
sfHover =function() {
var sfEls = ElementById("nav").getElementsByTagName_r("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].οnmοuseοver=function() {
this.className+=" sfhover";
}
sfEls[i].οnmοuseοut=function() {
this.className=place(new RegExp(" sfhover\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!］>
</script>
13）.ie6下⽀持position:absolute;
最近写⼀个短信平台的页⾯⽤到的底部固定的层，在ff和ie7,ie8下都是好的，可到ie6下就不⾏了，转了整个地球终于出来了：
background-attachment:fixed; }
#bottomNav {background-color:#096; z-index:999; position:fixed; bottom:0; left:0;width:100%; _position:absolute;
_top: expression_r(documentElement.scrollTop+ documentElement.clientHeight-this.offsetHeight); overflow:visible; }
样式表中调⽤即可！详细请见“⾼度⾃适应屏幕尺⼨！”
14）.border:none；与border:0；的区别
1.性能差异
【border:0;】把border设为“0”像素虽然在页⾯上看不见，但按border默认值理解，浏览器依然对border-width/border-color进⾏了渲染，即已经占⽤了内存值。
【border:none;】把border设为“none”即没有，浏览器解析“none”时将不作出渲染动作，即不会消耗内存值。
2.兼容性差异
兼容性差异只针对浏览器IE6、IE7与标签button、input⽽⾔，在win、win7、vista 的XP主题下均会出现此情况。
【border:none;】当border为“none”时似乎对IE6/7⽆效边框依然存在
【border:0;】当border为“0”时，感觉⽐“none”更有效，所有浏览器都⼀致把边框隐藏
总结：
1. 对⽐border:0；与border:none；之间的区别在于有渲染和没渲染，感觉他们和display:none；与visibility:hidden；的关系类似，⽽对于border属性的渲染性能对⽐暂时没测试的⽅法，虽然认为他们存在渲染性能上的差异但也只能说是理论上。
2. 如何让border:none；实现全兼容？只需要在同⼀选择符上添加背景属性即可
对于border:0；与border:none；个⼈更向于使⽤,border:none;，因为border:none；毕竟在性能消耗没有争议，⽽且兼容性可⽤背景属性解决不⾜以成为障碍。15）.ie下。png的图⽚不会有灰⾊背景出现
注：⾸推PNG8，即使在IE6中它的透明背景也能被正确显⽰。PNG8使⽤的技巧是，输出时把“杂边”设置为和背景接近的颜⾊
1.⼏经周折终于把ie6下.png有⾊图问题解决了，原来IE6.0原本⽀持png8的索引⾊透明度，但不⽀持png或8位以上的alpha 透明度，在IE6.0下，⾮PNG8格式的透明图⽚部分，会显⽰为淡淡的灰绿⾊。在⽹页中头部加个代码<!--[if IE 6]>
<script type="text/javascript" src=""></script>
<script src="js/DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('.png_bg');
</script>
<![endif]-->即可！
2.在样式⾥写#png-container{
width: 300px;
height: 150px;
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../imgs/logoB.png',sizingMethod='crop');border:1px solid red;display:block;
}到页⾯中调⽤<div id="png-container ">
<img src="imgs/logoB.png" alt="" />
</div>注意图⽚要保存为png-8格式的才⾏！
3. 将背景图⽚写成
即可。ff、ie7、ie6下都不会有灰⾊背景了，这个怎么⼜失灵了，唉害得我纠结了好⼏天！。
16）.表格⾃动换⾏
唉，最讨厌表格了，可是编辑软件平台有很多报表要⽤到表格来写，搞的我郁闷半死，要想让表格⾥td的内容到了⼀定宽度⾃动换⾏就要先设⼀个全局样式table{table-layout:fixed;}
td{word-break: break-all; word-wrap:break-word;};
17）.iframe⾼度⾃适应
给div加⼀个样式
再给iframe 加⼀个样式如下，只有把iframe定义成绝对定位后，才能⾃适应⾼度
18）.ie8下input的bug
我滴个孩来！⼀个⼩的两个input输⼊框，⼀个是⽂本框，⼀个是按钮，却怎么也接不到⼀起去，可把我给急坏了，这⼩问题花了我差不多⼀下午的时间，纠结半天终于给弄出来了，但不知原因，这么写就对了！
要定义input{ vertical-align:middle;}即可！
19）.按钮的链接路径
编写⽹页前台时会碰到按钮的链接路径怎么给的问题！只要在button⾥加个οnclick="window.location.href='orderCheck.htm‘"即可！
<button type="button"οnclick="window.location.href='orderCheck.htm'">Add toCart</button>
20）.图⽚加alt好处
⽹页中<img src=""alt=""/> 中的alt是很重要的，这涉及到⽹页的亲和⼒问题（），⽹页中的图⽚若是不加alt在图⽚没加载出来的时候会什么信息也看不到，加了alt则在加载不出来图⽚的时候显⽰图⽚的信息便于⽤户查看信息！
21）.
去除chrome浏览器下input和textarea点击选中框
取消chrome下input和textarea的聚焦边框：
input,button,select,textarea{outline:none}
取消chrome下textarea可拖动放⼤：
textarea{resize:none}
最后，写在⼀起，重置input和textarea的默认样式：
input,button,select,textarea{outline:none}
textarea{resize:none}
21）.页⾯中流动条问题
打开⼀个空⽩页⾯，观察浏览器右侧，会发现IE浏览器会有⼀段滚动条的槽道，⽽Firefox浏览器下没有。
22). ⼿机, Adroid2.2, 平板电脑, 浏览器, mobile safari
最近给平板电脑做页⾯，经历了⼀番探索，搞定了。
下⾯来说说我的解决⽅案。
测试设备：
GT-P1000 三星平板电脑（其实为⼤号⼿机）
操作系统：android2.1
浏览器：Mobile Safari/533.1
User Agent打印结果：
Mozilla/5.0 (Linux; U; Android 2.1;zh-cn; GT-P1000 Build/FROYO) AppleWebKit/533
.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
1. 在jsp页⾯顶上增加以下⽂档类型声明：
Java代码
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "">
<html xmlns="">
如果不加上⽂档类型声明的话，在浏览器⾥打开页⾯后，页⾯会根据移动设备屏幕的⼤⼩⾃动缩放页⾯，并且当点击输⼊框时，页⾯会⾃动放⼤，特别难看。加上声明之后，页⾯会展现原始⼤⼩，⼿指也可以拖动屏幕进⾏页⾯放⼤。
2. 普通的⽹页字体⼤⼩，在移动设备浏览器上看到的效果是字体变⼩
所以css的字体⼤⼩要做⼤⼀点。
我是研究了雅虎移动版的⽹站：
23）.页⾯中流动条问题
⽹页中改变input输⼊框的背景时，当输⼊的⽂字超过⼀定数字时，背景图⽚会跑，这时只要限定input的maxlength就⾏了！
24）.input在google浏览器下若⽤背景图⽚写并且点击上去有效果的话会掉下来
解决的办法是将input⾥的value=""中加⼀个空格！即写成value=" "
25）.解决ff下⾯td的换⾏问题<table width="200">
<tr>
<td width="25%" >abcdefghigklmnopqrstuvwxyz1234567890</td>
<td width="75%" >abcdefghigklmnopqrstuvwxyz1234567890</td>
</tr>
</table>
26)巧妙clearfix解决css浮动问题
26)巧妙clearfix解决css浮动问题
如何⽤clear来解决css浮动问题，应该是众多前端开发⼈员所关⼼的问题，是clear还是clearfix，其实我们最终⼀个⽬的就是让浮动产⽣更多的影响，最为⼀个前端⼈员，我们有必要深⼊研究和探讨...
万能float闭合，得知很多朋友都在使⽤下⾯的通⽤解决办法：
1.clear{clear:both;height:0;overflow:hidden;}
上诉办法是在需要清除浮动的地⽅加个div.clear或者br.clear，我们知道这样能解决基本清浮动问题。但是这种⽅法的最⼤缺陷就是改变了html结构，虽然只是加个div。
最优浮动闭合⽅案（这是我们推荐的）：
1.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
2.clearfix{*+height:1%;}
⽤法很简单，在浮动元素的⽗云素上添加class="clearfix"。你会发现这个办法也有个弊端，但的确是
⼩问题。改变css写法就ok了：
1.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
2.clearfix{*+height:1%;}
以上写法就避免了改变html结构，直接⽤css解决了。
很拉轰的浮动闭合办法：
1.clearfix{overflow:auto;_height:1%}
这种办法是我看国外的⼀篇⽂章得到的⽅案，测试了，百试不爽，真的很简单，很给⼒。喜欢的同学也可以试试这个办法。
这种⽅法是端友radom提供的，测试通过：
1.clearfix{overflow:hidden;_zoom:1;}
chrome下input[type=text]的placeholder不垂直居中的问题解决
line-height: normal;
line-height: 22px\9;
去掉超链接或按钮点击时的虚框线
a,a:hover,input,button{outline:none;blur:expression_Focus=this.blur());} input:active {outline:none;}input::-moz-focus-inner{border:0px}
修改select默认的样式
select{background:none;width:400px;border:1pxsolid #d8d8d8;}
option{vertical-align: middle;}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论