我准备实现一个3D导航栏,ul 里的li 存在默认间距,使用margin-right后,chrome和edge出现偏差,这应该是浏览器默认的样式,这里又不存在什么外边距合并的问题,只能换另外一种思路解决,好多人说用 *{margin:0; padding:0;},要是能解决,我就不在这问了,求救大神,chrome里设定margin-right:-9px; edge 里设定 margin-right: -4px; 如何不通过这种方式,实现这两个浏览器的兼容。代码如下:
样式
ol,ul,li {list-style: none; text-decoration: none;}
body {background-color: #bebebe;}
#three {width:660px; padding: 0 20px; margin: 20px auto; background-color: #f65f57; box-shadow: 0px 7px 5px #ba4a45; border-radius: 8px; text-align: center; }
#three li{position: relative; padding: 10px 20px; display: inline-block; list-style: none outside none; margin:0; }
#three a{display: inline-block; text-decoration: none; font: bold 20px/1 Arial; color: #fff; text-shadow:1px 2px 4px rgba(0,0,0,.5);}
#three li::after {content:""; position: absolute; top: 8px; width: 1px; height: 24px; background: linear-gradient(to top, #ff625a, #9e3e3a 50%, #ff625a);}
#three li::after {right: 0;}
#three li:last-child::after {display: none;}
/*动效*/
#three a:hover {transform: rotate(10deg); -webkit-transform: rotate(10deg);}
#three a {transition: all .2s ease-in ;}
有一种兼容的办法是,不使用::before 伪类,只使用::after伪类
ol,ul,li {list-style: none; text-decoration: none;}
body {background-color: #bebebe;}
#three {width:660px; padding: 0 20px; margin: 20px auto; background-color: #f65f57; box-shadow: 0px 7px 5px #ba4a45; border-radius: 8px; text-align: center; }
#three li{position: relative; padding: 10px 20px;
display: inline-block; list-style:
none outside none; }
#three a{display: inline-block; text-decoration: none; font: bold 20px/1 Arial; color: #fff; text-shadow:1px 2px 4px rgba(0,0,0,.5);}
#three li::after {content:""; position: absolute; top: 8px; width: 1px; height: 24px; background: linear-gradient(to top, #ff625a, #9e3e3a 50%, #ff625a);}
#three li::after {right: 0;}
#three li:last-child::after {display: none;}
/*动效*/
#three a:hover {transform: rotate(10deg); -webkit-transform: rotate(10deg);}
#three a {transition: all .2s ease-in ;}
虽然能解决,但是两个li的间距还是存在???????????????