极客观点
项目管理
HarmonyOS
jsp生成的一个菜单，就是Ul嵌套li，在chrome，firefox下都是正常的，但是360 8.1以及IE9以下结构不正常，本来嵌套在ul内的元素竟然跑出来了，导致整个导航左侧被挤压不正常显示了，忘记说了，整个项目主要用的bootstrap样式。生成菜单的代码在下面。
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></script>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<%@page contentType="text/html;charset=UTF-8"%>
<%@tag pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@tag import="java.util.List"%>
<%@tag import="org.springframework.context.ApplicationContext"%>
<%@tag import="org.springframework.web.context.support.WebApplicationContextUtils"%>
<%@tag import="com.mossle.api.menu.MenuConnector"%>
<%@tag import="com.mossle.api.menu.MenuDTO"%>
<%@tag import="com.mossle.core.auth.CurrentUserHolder"%>
<%@ tag import="java.util.ArrayList" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<style>
/*a:hover {color: #fff; text-decoration:none;}*/
.navbar .nav>li>a{
text-shadow: none !important;
padding:10px 15px ;
}
</style>
<%
ApplicationContext ctx = WebApplicationContextUtils.getWebApplicationContext(application);
MenuConnector menuConnector = ctx.getBean(MenuConnector.class);
CurrentUserHolder currentUserHolder = ctx.getBean(CurrentUserHolder.class);
try {
String userId = currentUserHolder.getUserId();
List<MenuDTO> menuDtos = menuConnector.findSystemMenus(userId);
List<MenuDTO> arrays=new ArrayList<MenuDTO>();
MenuDTO sy_=null;
MenuDTO gasp_=null;
MenuDTO kq_=null;
MenuDTO xxzx_=null;
MenuDTO aqyp_=null;
MenuDTO jsxt_=null;
MenuDTO zhbg_=null;
MenuDTO grbg_=null;
MenuDTO sjtjfx_=null;
MenuDTO xtaqpz_=null;
for (MenuDTO menuDto : menuDtos) {
if(menuDto.getCode().equals("sy")){
menuDto.setIconUrl("/cdn/gsicon/icon/sy.png");
sy_=menuDto;
continue;
}
if(menuDto.getCode().equals("gasp")){
menuDto.setIconUrl("/cdn/gsicon/icon/gzsp.png");
gasp_= menuDto;
continue;
}
if(menuDto.getCode().equals("kq")){
menuDto.setIconUrl("/cdn/gsicon/icon/kq.png");
kq_=menuDto;
continue;
}
if(menuDto.getCode().equals("xxzx")){
menuDto.setIconUrl("/cdn/gsicon/icon/xxzx.png");
menuDto.setUrl("javamail/index.do");
xxzx_=menuDto;
continue;
}
if(menuDto.getCode().equals("aqyp")){
menuDto.setIconUrl("/cdn/gsicon/icon/aqyp.png");
aqyp_=menuDto;
continue;
}
if(menuDto.getCode().equals("jsxt")){
menuDto.setIconUrl("/cdn/gsicon/icon/jstx.png");
menuDto.setUrl("pim/address-list-list.do");
jsxt_=menuDto;
continue;
}
if(menuDto.getCode().equals("grbg")){
menuDto.setIconUrl("/cdn/gsicon/icon/grbg.png");
menuDto.setUrl("pim/pim-schedule-list.do");
grbg_=menuDto;
continue;
}
if(menuDto.getCode().equals("zhbg")){
menuDto.setIconUrl("/cdn/gsicon/icon/zhbg.png");
menuDto.setUrl("car/car-info-list.do");
zhbg_=menuDto;
continue;
}
if(menuDto.getCode().equals("sjtjfx")){
menuDto.setUrl("pim/num-customs-list.do");
menuDto.setIconUrl("/cdn/gsicon/icon/tjfx.png");
sjtjfx_=menuDto;
continue;
}
if(menuDto.getCode().equals("xtaqpz")){
menuDto.setIconUrl("/cdn/gsicon/icon/aqpz.png");
xtaqpz_=menuDto;
continue;
}
}
arrays.add(sy_); arrays.add(gasp_); arrays.add(kq_); arrays.add(xxzx_); arrays.add(aqyp_);
arrays.add(jsxt_); arrays.add(grbg_);arrays.add(zhbg_); arrays.add(sjtjfx_); arrays.add(xtaqpz_);
for (MenuDTO menuDto : arrays) {
jspContext.setAttribute("menu", menuDto);
%>
<c:if test="${ menu !=null && menu.code !='xtaqpz'}">
<li class="${currentHeader == menu.code ? 'active' : ''}" style="width:102px;height:104px;padding-top: 14px;list-style: none">
<a href="${tenantPrefix}/${menu.url}" style="color:#FFFFFF;font-family: 方正兰亭细黑_GBK;font-size: 18px;display:block;margin:0 auto;text-align: center;">
<img src="${tenantPrefix}${menu.iconUrl}" style="display:block;margin:0 auto;cursor:pointer;padding-bottom: 10px;" >
<%--<i class="glyphicon glyphicon-list"></i>--%>
${menu.title}
</a>
</li>
</c:if>
<c:if test="${menu.code=='xtaqpz' && menu !=null}">
<li class="${currentHeader == menu.code ? 'active' : ''}" style="width:102px;height:104px;padding-top: 14px;list-style: none">
<a data-toggle="dropdown" class="dropdown-toggle" href="${tenantPrefix}/${menu.url}" style="color:#FFFFFF;font-family: 方正兰亭细黑_GBK;font-size: 18px;display:block;margin:0 auto;text-align: center;" >
<%--<i class="glyphicon glyphicon-list"></i>--%>
<img src="${tenantPrefix}${menu.iconUrl}" style="display:block;margin:0 auto;cursor:pointer;padding-bottom: 10px;" >
${menu.title} <b class="caret"></b>
</a>
<ul class="dropdown-menu" style="background-color: #2e589a;font-family: 方正兰亭黑_GBK;color: #fff;font-size: 16px;opacity: 0.8;">
<c:forEach items="${menu.children}" var="child">
<%--<li--%> <%--<li--%>
<c:if test="${empty child.children}">
<li class="${currentHeader == child.code ? 'active' : ''}" style="background-color: #2e589a;font-family: 方正兰亭黑_GBK;color: #fff;font-size: 16px;">
<a href="${tenantPrefix}/${child.url}" style="background-color: #2e589a;color:#fff;font-family: 方正兰亭黑_GBK;font-size: 16px;">
<i class="glyphicon glyphicon-bookmark"></i>
${child.title}
</a>
</li>
</c:if>
<c:if test="${not empty child.children}">
<li class=" ${currentHeader == child.code ? 'active' : ''}" style="background-color: #2e589a;font-family: 方正兰亭黑_GBK;font-size: 16px;">
<a data-toggle="dropdown" class="dropdown-toggle" href="${tenantPrefix}/${child.url}" style="background-color: #2e589a;font-family: 方正兰亭黑_GBK;color: #fff;font-size: 16px;">
<i class="glyphicon glyphicon-bookmark"></i>
${child.title} <b class="caret"></b>
</a>
<ul class="" >
<c:forEach items="${child.children}" var="child2">
<li style="list-style: none">
<a href="${tenantPrefix}/${child2.url}" style="font-family: 方正兰亭刊黑_GBK;font-size: 14px;color:#000;text-decoration：none;">
<%--<i class="glyphicon glyphicon-bookmark"></i>--%>
${child2.title}
</a>
</li>
</c:forEach>
</ul>
</li>
</c:if>
<%--</li>--%>
</c:forEach>
</ul>
</li>
</c:if>
<%
}
} catch(Exception ex) {
System.out.println(ex);
}
%>
chrome
贴浏览器上html的完整代码。