1.总页面
设计规则，一个小页面对应有一个.css文件，一个大页面由多个小页面组成。
系统页面的BOX
zong.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<%-- <%
String prcode = request.getParameter("prcode");
%> --%>
<frameset rows="*" cols="250,*" framespacing="0" frameborder="no" border="0" frameborder="0">
<frame src="<%=request.getContextPath()%>/shejiwenjuan3menu1.action?prcode=${prcode }" name="sej_leftFrame" scrolling="No" noresize="noresize" id="sej_leftFrame" title="leftFrame" frameborder="no" border="0" frameborder="0"/>
<frame src="<%=request.getContextPath()%>/turnTo.action?pr_Code=${prcode }&type=zonghe"" name="sej_mainFrame" id="sej_mainFrame" title="mainFrame" noresize="noresize" frameborder="no" border="0" frameborder="0" scrolling="auto"/>
<%-- <frame src="<%=request.getContextPath()%>/turnTo.action?pr_Code=${prcode }&type=basicInformation" name="sej_mainFrame" id="sej_mainFrame" title="mainFrame" noresize="noresize" frameborder="no" border="0" frameborder="0" scrolling="auto"/> --%>
<%-- <frameset rows="*,15" cols="0,*" framespacing="0" frameborder="no" border="0" frameborder="0" >
<frame src="<%=request.getContextPath()%>/shejiwenjuanboxc.action" name="sej_leftFrame1" scrolling="No" noresize="noresize" id="sej_leftFrame1" title="sej_leftFrame1" frameborder="no" border="0" frameborder="0" />
<frame src="<%=request.getContextPath()%>/changView.action?prcode=${prcode }&id=${id }"
name="sej_mainFrame" id="sej_mainFrame" title="mainFrame" noresize="noresize" frameborder="no" border="0" frameborder="0" scrolling="auto"/>
</frameset> --%>
</frameset>
<noframes><body>
</body></noframes>
</html>
注意：
frame属性：
image.png
scrolling 属性规定是否在 iframe 中显示滚动条。
默认地，如果内容超出了 iframe，滚动条就会出现在 iframe 中。
auto 在需要的情况下出现滚动条（默认值）。
yes 始终显示滚动条（即使不需要）。
no 从不显示滚动条（即使需要）。
在总页面的frame中为一小页面设计了滚动效果，无需在小页面中用overflow:auto属性去设置滚动。
2.小页面
小页面利用引用了一个全局样式，大部分页面都是不要滚动条的，少数有问卷填充的需要滚动条，
<!-- 全局样式 -->
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/main.css">
里面有一个属性：
::-webkit-scrollbar {
width: 0
}
因此我的小页面无论如何设置都出不来滚动条，如果我不引用该文件，小页面的滚动条就能正常显示。恰强引用的少，所以没啥关系，可是我又不甘心啊，如果引用到很多全局样式是不可能不引用的呀。我想肯定有个属性可以覆盖掉它。我直接在小页面里添加了同样的属性，结果居然都生效了
image.png
两个都勾掉的时候滚动条出来了，
image.png
似乎只要用到了 ::-webkit-scrollbar 属性不管值为多少都消失了，重点是说好的优先级呢，同一个属性还能一起显示，有点凌乱了。写成body: ::-webkit-scrollbar 也是一样显示。
用frame的Scrolling确实可以，可是还得找iframe滚动条太长又得设置高度，所以我就直接在小页面的盒子里用了Overflow:auto,再给盒子加个高度就好了。
注意：
定义滚动条就是利用伪元素与伪类，那什么是伪元素和伪类呢？
伪类大家应该很熟悉:link,:focus,:hover，此外CSS3中又增加了许多伪类选择器，如:nth-child，:last-child，:nth-last-of-type()等。
CSS中的伪元素大家以前看过：:first-line,:first-letter,:before,:after。那么在CSS3中，伪元素进行了调整，在以前的基础上增加了一个“：”也就是现在变成了“::first-letter,::first-line,::before,::after”，另外CSS3还增加了一个“::selection”。两个“：：”和一个“：”在css3中主要用来区分伪素和伪元类。
webkit的伪类和伪元素的实现很强，可以把滚动条当成一个页面元素来定义，再结合一些高级的CSS3属性，比如渐变、圆角、RGBa等等。然后如果有些地方要用图片，可以把图片也可以转换成Base64，不然每次都得加载那个多个图片，增加请求数。
这个伪类可以将webkit自身的滚动条渲染关闭，只按照用户自定义的css信息进行渲染。
image.png
问题：应用CSS文件带有::-webkit-scrollbar:width=0;的属性怎么覆盖掉
网友评论