IT技术 – 第 11 页

子级元素如何覆盖父级元素之边框颜色的遮盖应用

由于昨天重装系统,很多程序还未正确配置好,这篇暂且长话短说,直接上代码.
关于这个需求在网站制作上还是经常遇到的(例如白色边框覆盖其他边框的障眼法),做到全兼容似乎只有这个方法最好,特分享出来.这里坚决不用z-index,更加不用绝对定位!查看DEMO

<!DOCTYPE html>
<html>
<head>
<title>childBox and parentBox overlay relationship</title>
<style type="text/css">
* {margin:0;padding:0;line-height:1.5;font-family:"Microsoft YaHei";}
body {background-color:#eee;}
.container {width:1000px;margin:30px auto;}
.parentBox {width:300px;height:300px;margin:0 auto; border:50px solid #ccc;*overflow:hidden;}
.childBox {width:200px;padding:10px;margin:0 auto;height:250px;border:40px solid #aaa;margin-top:20px;position:relative;}
h3 {font-size:18px;}
p {font-size:14px;margin:10px 0;}
.author {text-align:right;}
</style>
</head>
<body>
 <div class="container">
 <div class="parentBox">
 <div class="childBox">
 <h3>childBox and parentBox</h3>
 <p>The childBox overlay the parentBox, otherwise, it must be compatible widt all IEs</p>
 <p class="author">whidy</p>
 </div>
 </div>
 </div>
</body>
</html>

明天重新整理一下,发一点相关页面应用到这个的地方.

一个小小的双引号引发的思考-XP内IE下的字体(终)

这是我的终极方案了…其实这个最简单IE6,7的中文双引号,蛋疼!这个方案从代码和易于理解的角度来看是最好的,缺点就是要外部引用两个东东,如果网速不好就杯具了.这次也不多少了,用到一个伪类选择器(为了兼容IE6,IE7引入了一个JS文件),用到上次说的外部引用google font.那就直接上代码和DEMO测试页

<!DOCTYPE html>
<html>
<head>
<title>大双引号文字段自适应DEMO</title>
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<link href='http://fonts.googleapis.com/css?family=Anonymous+Pro:700' rel='stylesheet' type='text/css'>
<![endif]-->
<style type="text/css">
.container {width: 720px;color: #000;padding:20px;background-color: #eee; text-align: left;position: absolute;top: 200px;left: 220px;}
.content {margin:40px 0 0 8px;padding-bottom:30px;position: relative;font:bold 24px/40px "Microsoft YaHei";text-indent:0;}
.content:before, .content:after {font:bold 160px/160px Arial;*font-family:"Anonymous Pro"; height:75px;overflow: hidden;}
.content:before {content:"“";position: relative;display:inline;margin: -40px 0 0 0;float: left;*top: -5px;
}
.content:after {content:"”";position:absolute; margin: -12px 0 0 -15px; *margin: -20px 0 0 5px;}
</style>
</head>
<body>
    <div class="container">
		<p class="content">HTC于北京时间23：00在英国伦敦和美国纽约同步举行发布会，正式发布新旗舰智能手机HTC One (M8)，0界面等几大亮点。HTC One (M8)带来突破性的设计与质量，拥有一体成型的高质感金属外型设计，5.0英寸1080p屏幕，极窄边框以及平滑柔和的圆弧曲线，机身更加圆润和轻薄。</p>
    </div>
</body>
</html>

之前的几种方法,参考:
一个小小的双引号引发的思考-XP内IE下的字体(上)
一个小小的双引号引发的思考-XP内IE下的字体(下)

话说这个WORDPRESS更新真是快,才更新到3.8.2,这下又出了3.9- -,好在不用改主题…