38103 次
8 に答える
2
サファリのバグです。
バグ 40216 - 選択したタグで text-align が機能しない
https://bugs.webkit.org/show_bug.cgi?id=40216
2010年出願
于 2018-02-27T17:31:24.587 に答える
1
解決策が見つからない場合は、angularjs でこのトリックを使用するか、js を使用して、選択した値を div のテキストにマップします。この解決策は、angular で完全に css に準拠していますが、select と div 間のマッピングが必要です。
var myApp = angular.module('myApp', []);
myApp.controller('selectCtrl', ['$scope',
function($scope) {
$scope.value = '';
}]);.ghostSelect {
opacity: 0.1;
/* Should be 0 to avoid the select visibility but not visibility:hidden*/
display: block;
width: 200px;
position: absolute;
}
.select {
border: 1px solid black;
height: 20px;
width: 200px;
text-align: center;
border-radius: 5px;
display: block;
}<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-guide-concepts-1-production</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-app ng-controller="selectCtrl">
<div class=select>
<select ng-model="value" class="ghostSelect">
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</select>
<div>{{value}}
</div>
</div>
</div>
</body>phonegapでこの解決策を見つけるのに1日かかったので、これが誰かに役立つことを願っています.
于 2016-03-25T13:37:03.543 に答える
1
于 2012-06-25T01:31:29.213 に答える
0
上記のコメントで述べたように、これは実際にはcssソリューションではないことはわかっていますが、jqueryを使用する場合は、これが回避策として機能します。Chromeでは正しく機能しません。しかし、ブラウザをチェックすると、safari用にロードできます。
于 2012-06-25T01:40:22.050 に答える
-3
これは私にとってはうまくいきました。
select {
text-align:-moz-center;
text-align:-webkit-center;
}
于 2013-03-24T09:58:52.933 に答える