Button CSS not working fine in Internet Explorer 10 - css

Question

Hi I have 4 buttons in a row. Button CSS is coming fine in IE11,Chrome and Safari and all other browser except IE10. Here is my code
Hi I have 4 buttons in a row. Button CSS is coming fine in IE11,Chrome and Safari and all other browser except IE10. Here is my code
My HTML
{{actionBarTitle}}
</div>
<div class="action-line col-xs-10 col-md-10 col-sm-10 abc">
<!-- Edit button -->
<div>
<button class="btn btn-large deactivate-btn-large" title="{{::'title.edit' | translate}}" ng-click="showEditUserPanel()" title="" ng-disabled="!actionButtonStatus.EDIT">
<i class="fa fa-pencil-square-o fa-lg"></i>
<span class="action-button-text">{{::'button.edit' | translate}}</span>
</button>
</div>
<div>
<button class="btn btn-large deactivate-btn-large" title="{{::'title.assign.roles' | translate}}" ng-click="showAssignRolesPanel()" title="" ng-disabled="!actionButtonStatus.ASSIGN">
<i class="fa fa-user-secret fa-lg"></i>
<span class="action-button-text">{{::'button.assign' | translate}}</span>
</button>
</div>
<div class="active-send-select" pull-left btn-group>
<button class="btn btn-large dropdown-toggle" data-toggle="dropdown" title="{{::'title.send' | translate}}" ng-disabled="!actionButtonStatus.SENT">
<i class="fa fa-envelope fa-lg"></i>
<span class="action-button-text">{{::'label.button.send' | translate}}</span>
<i class="icon-chevron-down pull-right" style="margin-top:-20px;"></i>
</button>
<ul class="dropdown-menu filter-state dropdown" ng-show="!user.isPeUser">
<li><span class="{{userstatus == 'Complete'? 'resettest': ''}}">{{::'label.dropdown.sendActivation' | translate}}</span></li>
<li>
<span class="{{(userstatus == 'Notified' || userstatus == 'Added')? 'resettest': '' }}">{{::'label.dropdown.resetPassword' | translate}}</span>
</li>
</ul>
<ul class="dropdown-menu filter-state dropdown" ng-show="user.isPeUser">
<li>
{{::'label.send.welcomeEmail' | translate}}
</li>
</ul>
</div>
<div class="action-bar-item" >
<button class="btn btn-large deactivate-btn-large" ng-click="changeUserState()" title={{title}} ng-disabled="!actionButtonStatus.ENABLE">
<i class="fa fa-power-off fa-lg"></i>
<span class="action-button-text">{{getEnableButtonLabel()}}</span>
</button>
</div>
</div>
</div>
<div class="panel-title">
<span>{{panelTitle}}</span>
</div>
</div>
</div>
<div class="row inner-row full-panel" ng-include="'script/item-full-panel/user-select-panel.html'" ng-if="panelSelector.USER_SELECT"></div>
<div class="row inner-row full-panel" ng-include="'script/item-full-panel/user-add-panel.html'" ng-if="panelSelector.USER_ADD"></div>
<div class="row inner-row full-panel" ng-include="'script/item-full-panel/user-edit-panel.html'" ng-if="panelSelector.USER_EDIT"></div>
<div class="row inner-row full-panel" ng-include="'script/item-full-panel/user-detail-panel.html'" ng-if="panelSelector.USER_DETAILS"></div>
<div class="row inner-row full-panel" ng-include="'script/item-full-panel/user-import-panel.html'" ng-if="panelSelector.USER_IMPORT"></div>
<div class="row inner-row full-panel" ng-include="'script/item-full-panel/user-state-change-panel.html'" ng-if="panelSelector.USER_STATE_CHANGE"></div>
<div class="row inner-row full-panel" ng-include="'script/item-full-panel/password-reset-panel.html'" ng-if="panelSelector.USER_PASSWORD_RESET"></div>
<div class="row inner-row full-panel" ng-include="'script/item-full-panel/user-activation-panel.html'" ng-if="panelSelector.USER_ACTIVATE"></div>
<div class="row inner-row full-panel" ng-include="'script/item-full-panel/welcome-email-panel.html'" ng-if="panelSelector.USER_WELCOME_EMAIL"></div>
<div class="row inner-row full-panel" ng-include="'script/assign-roles-panel/assign-roles-panel.html'" ng-if="panelSelector.ASSIGN_ROLES"></div>
<!-- access denied template -->
<div class="row inner-row full-panel" ng-if="panelSelector.ACCESS_DENIED">
<div class="row scrowable" ge-scroll-port>
<div class="access-denied-msg">
Access Denied
</div>
</div>
</div>
</div>
My CSS
.deactivate-btn-large {
width: 90px;
margin-left: 10px;
margin-bottom: 10px;
height: 34px;
border: 1px solid #grayLight;
border-radius: 4px 4px 4px 4px;
margin-right: 10px;
}
.action-button-text {
display: inline-block;
}
.active-send-select {
white-space: nowrap;
width: 90px;
button.btn {
width: 90px;
height: 34px;
padding: 5px 5px;
border-radius: 4px 4px 4px 4px;
margin-left: 10px;
text-align: left;
i {
padding: 5px 0 0 5px;
}
}
.dropdown {
margin-top: -5px;
margin-left: 225px;
}
.active-filter-option {
color: #black;
}
}
.dropdown {
margin-top: -5px;
margin-left: 225px;
}
[This is coming correct][1]
[In IE 10 it is coming like that][2]
[1]: https://i.stack.imgur.com/HWjN2.png
[2]: https://i.stack.imgur.com/CO3BZ.png
Where I am doing wrong. Please let me know. Thanks in advance.

Answer 1

Try using prefixfree, this will help you to put the right prefix for css properties that needs specific prefix for a specific borwser. Just load the js file in the head tag