我事先向所有可能质疑这个问题的人道歉。在最终尝试“破解”它之前，我已经搜索并尝试了许多不同的解决方案。
我知道必须有许多其他方法可以使用（JQuery，JavaScript等），但我不知道除了使用CSS之外如何解决这个问题。
这就是我想要实现的目标：
我遇到了Angular中的情况，当我点击其中一个锚点菜单链接时，我的主内容视图向左移动30px。我不知道为什么！
我检查了我的CSS，我检查了!important规则，我检查了线型，以及我能想到的其他所有内容。
当我在Chrome开发工具中查看我的样式时，我的CSS对于我的#main元素是正确的：
#main {
float: left;
width: calc(100% - 199px);
margin-left: 199px;
padding: 0 20px;
transition: all .25s ease-in-out;
}
即使在我点击并且#main元素移动30px后，Chrome开发工具中的样式也没有显示任何变化。
当我在开发工具中删除我的margin-left参数的199px，并将其更改回199px时，元素将自己定位在完美的位置......
所以，我有以下想法;
#main元素大小的href链接上创建CSS悬停规则，或#main元素的大小。 这是我的href链接的样子：
<li><a href ng-click="redirectTodiv('mentionList', $event)"><img title="Mentions List" src="images/postList.svg" title="" height="25" /><span class="navText">Mentions List</span></a></li>
这是#main元素的CSS和我的菜单：
.adminMenu {
background: #3a3a3a;
padding: 24px 0 0;
color: #eadfdb;
display: inline-block;
vertical-align: top;
min-height: 100vh;
transition: all .25s ease-in-out;
position: fixed;
animation: fadeIn 1s;
left: 0;
width: 199px
}
.side-nav li a {
display: block;
background: none;
padding: 8px 10px;
border-bottom: 1px solid #eadfdb;
transition: background-color .25s ease-in-out;
color: #eadfdb;
height: 27px;
overflow: hidden
}
.side-nav li a:hover {
background-color: #f37934
}
#main {
float: left;
width: calc(100% - 199px);
margin-left: 199px;
padding: 0 20px;
transition: all .25s ease-in-out
}
这是我看到课程的菜单：
<section class="adminMenu" ng-class="menuStateClass">
<h3>{{fusionTitle}}</h3>
<div id="minMaxMenu" ng-click="minMaxMenu()">
<img src="images/collapse.svg" title="Click to expand" width="23" height="23" id="menuExpand" class="collapseIcon" ng-class="arrowDirectionClass" /> <span ng-show="showMenuHideText">Hide Menu</span>
</div>
<nav class="side-nav">
<ul>
<li id="socialMediaClick"><a href ng-click="redirectTodiv('top', $event)"><img title="Post List" src="images/postList.svg" title="" height="25" /><span class="navText">Summary</span></a></li>
<li><a href ng-click="redirectTodiv('mentionList', $event)"><img title="Mentions List" src="images/postList.svg" title="" height="25" /><span class="navText">Mentions List</span></a></li>
<li><a href ng-click="redirectTodiv('volume', $event)"><img title="Volume" src="images/volumeHour.svg" title="" height="25" /><span class="navText">Volume</span></a></li>
<li><a href ng-click="redirectTodiv('mediaSource', $event)"><img title="Media Source" src="images/postSource.svg" title="" height="25" /><span class="navText">Media Source</span></a></li>
<li><a href ng-click="redirectTodiv('sentiment', $event)"><img title="Sentiment" src="images/sentiment.svg" height="25" /><span class="navText">Sentiment</span></a></li>
<li><a href ng-click="redirectTodiv('engagers', $event)"><img title="Engagers" src="images/engagement.svg" height="25" /><span class="navText">Engagers</span></a></li>
<li><a href ng-click="redirectTodiv('linkShares', $event)"><img title="Link Shares" src="images/source_list.svg" height="25" /><span class="navText">Link Shares</span></a></li>
<li><a href ng-click="redirectTodiv('hashtags', $event)"><img title="Hashtags" src="images/hashtag.svg" height="25" /><span class="navText">Hashtags</span></a></li>
<li><a href ng-click="redirectTodiv('appsUsed', $event)"><img title="Apps Used" src="images/twitterPlatform.svg" height="25" /><span class="navText">Apps Used</span></a></li>
<li><a href ng-click="redirectTodiv('demographics', $event)"><img title="Demographics" src="images/demographics.svg" height="25" /><span class="navText">Demographics</span></a></li>
<li><a href ng-click="redirectTodiv('wordCloud', $event)"><img title="Word Cloud" src="images/wordCloud.svg" height="25" /><span class="navText">Word Cloud</span></a></li>
<li><a href="#summary_social_mentions_social_media#/support"><img title="Support" src="images/help.svg" title="" height="25" /><span class="navText">Support</span></a></li>
</ul>
</nav>
</section>
有什么想法吗？
答案 0 :(得分：0)
如果其他人可能遇到类似的问题，我在JavaScript中使用以下解决方案修复了我的问题：
$scope.redirectTodiv = function (divname, event) {
var id = $location.hash();
$location.hash(divname);
$anchorScroll();
$location.hash(id);
styleAdjust();
};
function styleAdjust() {
//DETECT BROWSER
// Opera 8.0+
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
// Firefox 1.0+
var isFirefox = typeof InstallTrigger !== 'undefined';
// Safari 3.0+ "[object HTMLElementConstructor]"
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0 || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);
// Internet Explorer 6-11
var isIE = /*@cc_on!@*/false || !!document.documentMode;
// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;
// Chrome 1+
var isChrome = !!window.chrome && !!window.chrome.webstore;
/////////////////////////////////////////////////////
// GET STYLE
var elementMargin = document.getElementById("main");
var style = elementMargin.currentStyle || window.getComputedStyle(elementMargin);
////////////////////////////////////////////////////
// ADJUST
if (isIE) {
var oldValue = parseInt(style.marginLeft, 10);
console.log("Current marginLeft: " + oldValue);
var newValue = oldValue + 40;
console.log("New marginLeft: " + newValue);
document.getElementById("main").style.marginLeft = newValue + "px";
}
else if (isFirefox) {
var oldValue = parseInt(style.marginLeft, 10);
console.log("Current marginLeft: " + oldValue);
var newValue = oldValue + 20;
console.log("New marginLeft: " + newValue);
document.getElementById("main").style.marginLeft = newValue + "px";
}
}