0

box-shadow を IE で動作させる方法について質問しましたここ。

ただし、実際には IE が問題ではないことが判明しました。IE は、次のように影を生成できます。

ここに画像の説明を入力

上記の悲鳴は、localhost で実行されている Meteor アプリからのものです。ただし、Sharepoint サイト (ページのコンテンツ エディター Web パーツ) で影の効果を実現しようとすると、ボックスの影が表示されません。

ここに画像の説明を入力

作業用 (Meteor) の CSS は次のとおりです。

#imgPostTravelTop:hover,
#imgPostTravelTopRight:hover,
#imgPostTravelCenter:hover,
#imgPostTravelBottom:hover {
  z-index: 4;
    -moz-box-shadow: 0 0 7px #000;
    -webkit-box-shadow: 0 0 7px #000;
    box-shadow: 0 0 7px #000;

  border: 1px solid gold;
}

したがって、IE 固有のディレクティブがなくても、IE でシャドーイングが正常に機能します。

機能しない (Sharepoint コンテンツ エディター Web パーツ) の CSS は次のとおりです。

.finaff-form-help-post-travel-centerimage:hover, 
.finaff-form-help-post-travel-bottomimage:hover {
    z-index: 4;
    -moz-box-shadow: inset 0 0 7px #000;
    -webkit-box-shadow: inset 0 0 7px #000;
    box-shadow: inset 0 0 7px #000;

    border: 1px solid red;
}

注: かなり前に IE のバージョンをチェックした msdn 雑誌のスタックに誓って言うと、それは IE8 でしたが、確認に行ったところ、実際には IE11 でした! しかし、この比較的新しいバージョンの IE11 でも、ボックス シャドーイングは失敗しています。

私が得た以前の提案は、これを試すことでした：

zoom: 1;
filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=5, OffY=5, 
    Color=#ff0000);

...しかし、それは何もしません。

私も試しました：

-ms-filter: "progid:DXImageTransform.Microsoft.DropShadow(OffX=5, OffY=5, Color=#ff0000)";

そして最後に、私の以前の質問 (上記にリンクされています) での回答は次のことを示唆しています。

filter:

progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=0,strength=5), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=45,strength=2), progid:DXImageTransform.Microsoft. Shadow(color=#aaaaaa,direction=90,strength=5), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=135,strength=5), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa ,direction=180,strength=10), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=225,strength=5), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=270,strength =5), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=315,strength=2);

しかし、これはどれも機能しません。ローカルで実行されている Meteor アプリでは IE でシャドウが機能するのに、Sharepoint Server でプロビジョニングされたコンテンツ エディター Web パーツでは機能しないのはなぜですか? どちらも「InPrivate」IE セッションの同じインスタンスで実行されています。

James Johnson の回答で見つけた 1 つの可能性は、おそらく私のマークアップの次の行を示しています。

<meta http-equiv="X-UA-Compatible" content="IE=8" />

…が問題です。しかし、私はその行を明示的に追加しませんし、それがどこから来たのかもわかりませんし、コードベースのどこから来ているのかもわかっていて、それを削除すると、Sharepoint サイトの他の場所でどのような大混乱を引き起こすかわかりません。

記録として、動作中の Meteor アプリの「ソースの表示」は大きく異なり、「メタ」タグは含まれていません。それはまったく「別の動物」です。好奇心旺盛な方のために、ここにその全体を示します。

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" class="__meteor-css__" href="/merged-stylesheets.css?abd8fa0f9109090b6dfb04ae018ba1e7a90a608e">


<script type="text/javascript">__meteor_runtime_config__ = JSON.parse(decodeURIComponent("%7B%22meteorRelease%22%3A%22METEOR%401.2.0.2%22%2C%22PUBLIC_SETTINGS%22%3A%7B%7D%2C%22ROOT_URL%22%3A%22http%3A%2F%2Flocalhost%3A3000%2F%22%2C%22ROOT_URL_PATH_PREFIX%22%3A%22%22%2C%22appId%22%3A%22wc8xy4j0rurw1r0c6ol%22%2C%22autoupdateVersion%22%3A%22fbf092224f885decf98544f617c037c838bed042%22%2C%22autoupdateVersionRefreshable%22%3A%22d906b78beb8cf4410c06763a9c8286ea8465b975%22%2C%22autoupdateVersionCordova%22%3A%22none%22%7D"));</script>

  <script type="text/javascript" src="/packages/underscore.js?fa590de5090ceb4a42555b48562fd8f8e7035758"></script>
  <script type="text/javascript" src="/packages/meteor.js?9730f4ff059088b3f7f14c0672d155218a1802d4"></script>
  <script type="text/javascript" src="/packages/autopublish.js?c5edcae57ad2cf69f735706476fb86d91c1f1b0e"></script>
  <script type="text/javascript" src="/packages/insecure.js?e7411f6cee07c76688e26c3b20767e857b42ad9f"></script>
  <script type="text/javascript" src="/packages/jquery.js?bd30605bc9f8429d01bae2d29081902d10a6c400"></script>
  <script type="text/javascript" src="/packages/linto_jquery-ui.js?6871fa19c8686253b1f7e0f12dab875122097a7d"></script>
  <script type="text/javascript" src="/packages/standard-minifiers.js?b02a7937678c6058031ee7b2f45b5a617518335d"></script>
  <script type="text/javascript" src="/packages/meteor-base.js?f0836ed3757e6217fff6e2710a1293407a6d9b09"></script>
  <script type="text/javascript" src="/packages/mobile-experience.js?674f55574f9947b91bb5f92f9ea9be098479b649"></script>
  <script type="text/javascript" src="/packages/random.js?d48c6af563fc182146464d0e3935bf1385aafe1e"></script>
  <script type="text/javascript" src="/packages/base64.js?52d94e9ee54ea51e35e9d410040454b9d9f9136a"></script>
  <script type="text/javascript" src="/packages/ejson.js?6b2a6aad82b5a8eb6d5f26975783b243b6df124a"></script>
  <script type="text/javascript" src="/packages/id-map.js?7ca7d36e6fea2952e28bf48090ce1c5c110df912"></script>
  <script type="text/javascript" src="/packages/ordered-dict.js?2628d5d93b3386b11f2d072e1d70ea9644a0652a"></script>
  <script type="text/javascript" src="/packages/tracker.js?7776276660c988c38fed448d8262b925dffb5bc3"></script>
  <script type="text/javascript" src="/packages/mongo-id.js?86be8beb10a566185e04cb56b189a091ab8773c6"></script>
  <script type="text/javascript" src="/packages/diff-sequence.js?693d4e99cb4a8884bd58c0da70e580fcf7fec2f0"></script>
  <script type="text/javascript" src="/packages/geojson-utils.js?83d13d8f6fd1847ed97e71e73e2f55dc9165dadf"></script>
  <script type="text/javascript" src="/packages/minimongo.js?cdf1a26cf7719fa9471a8017c3defd5aea812727"></script>
  <script type="text/javascript" src="/packages/check.js?fc9c23a3200accbea4c234c45664bd38c4ae2713"></script>
  <script type="text/javascript" src="/packages/retry.js?cf00021132d94e73a330886b24df2373a3b209ab"></script>
  <script type="text/javascript" src="/packages/ddp-common.js?23a845a08ff48730e7fbbbe941df509caa6b9b66"></script>
  <script type="text/javascript" src="/packages/reload.js?4afcce286a1d3526c99dff17696bd42e70150db1"></script>
  <script type="text/javascript" src="/packages/ddp-client.js?82da06d8e1ea6342d823b2c5c3be071e96108c70"></script>
  <script type="text/javascript" src="/packages/ddp.js?1c935134013739ed5ece46880dea800b6319bd67"></script>
  <script type="text/javascript" src="/packages/ddp-server.js?1057b33d71942bc01fd0167e2b2a5f49f5545d11"></script>
  <script type="text/javascript" src="/packages/mongo.js?5dcfbae63393ea63b330ea0c46d7b41eb1b4c3ae"></script>
  <script type="text/javascript" src="/packages/blaze-html-templates.js?31453f3129c01ec6fabaa5b791f6572e8c4464a2"></script>
  <script type="text/javascript" src="/packages/reactive-dict.js?e43655c138a9184c40228ef4dd2da3f65f1bd8bb"></script>
  <script type="text/javascript" src="/packages/session.js?0ae88e5e9f7b50b0047ade23a47a1a8dfa5874b9"></script>
  <script type="text/javascript" src="/packages/logging.js?79dea15e9da438bd107b9ff92162c1b189d70e4b"></script>
  <script type="text/javascript" src="/packages/deps.js?a0f1fc18309813a3aac8954f76d0c73e4c5d46f4"></script>
  <script type="text/javascript" src="/packages/htmljs.js?02fcaaa6a72c008a5f618f8ec940eac2d240fc2c"></script>
  <script type="text/javascript" src="/packages/observe-sequence.js?e0b5ec6321580efa20bf31f5a1ae4c52f05f38b5"></script>
  <script type="text/javascript" src="/packages/reactive-var.js?b77e26d789bc6e0859202f67ea0934d68346450a"></script>
  <script type="text/javascript" src="/packages/blaze.js?695c7798b7f4eebed3f8ce0cbb17c21748ff8ba8"></script>
  <script type="text/javascript" src="/packages/spacebars.js?3eafdd2d5d5d8f08431aa842df4b5e8142600b17"></script>
  <script type="text/javascript" src="/packages/webapp.js?ba2db8eb3207813c575b828e42663552e89d359e"></script>
  <script type="text/javascript" src="/packages/livedata.js?93f27626c1702ea8af804d6170ffbf8968626718"></script>
  <script type="text/javascript" src="/packages/hot-code-push.js?3916ae26c3ca4928e61dc2da7e7b3f93e4164c0c"></script>
  <script type="text/javascript" src="/packages/templating.js?142b64439619ddabba8ad16a798ed8349de73bae"></script>
  <script type="text/javascript" src="/packages/launch-screen.js?b50bb1bd905d2cc3d6182ee28c096df0cc24a725"></script>
  <script type="text/javascript" src="/packages/ui.js?6aa94fb4743be2472f799f928674607edae2afdf"></script>
  <script type="text/javascript" src="/packages/autoupdate.js?aba61f60d98ac77989b7b8984bb8495824c0dad7"></script>
  <script type="text/javascript" src="/packages/global-imports.js?a379a2c4e2479aebed57fef92a7f3df1f6843cf5"></script>
  <script type="text/javascript" src="/app/template.formhelp.js?b781feeb046b65b092be70ca04fb6d6fe3c9c114"></script>
  <script type="text/javascript" src="/app/formhelp.js?82951332599f48810cba5422fff5616aaf8a201f"></script>



<title>Travel Form Help</title>
</head>
<body>

</body>
</html>

アップデート

これは SharePoint の HTML の問題と思われるため、「ホバー」イベント ハンドラー トグル (mouseenter、mouseleave) などで jQuery を使用して回避する必要があるのではないでしょうか。私はもともとその道をたどっていましたが、より洗練された CSS のみのアプローチに切り替えました。IE (Web 開発者の労働時間の悩みの種) のようなものは、エレガンスを達成することをより困難にします。

4

1 に答える 1

1

SharePoint 2010 は、さまざまな ActiveX コントロールと Office 拡張機能に関連する機能を保持するために、互換モードで実行するように Internet Explorer に指示します。互換モードは、HTML、CSS、および ECMAscript への準拠という点で、基本的に IE8 と同等です。

必要に応じて、SharePoint が使用するマスターページ内のタグ (タグではない先行要素なし) の<meta http-equiv="X-UA-Compatible" content="IE=Edge" />間に忍び込んで、実際に IE11 のように動作するように IE11 に指示することもできますが、SharePoint の機能が失われる可能性があります。<head></head><meta>

サイトで発行インフラストラクチャ サイト コレクション機能と発行サイト機能を有効にしている場合は、マスターページとページ レイアウトの操作が簡単になります。SharePoint サイトのマスターページ ギャラリーに複数のマスターページを含めることができます。これにより、一部のページを従来の機能のために IE8 モードでレンダリングし、一部のページを最新の HTML/CSS のために Edge モードでレンダリングすることができます。(既存のマスターページのコピーをダウンロードし、メタ ヘッダー タグを追加または更新して、新しいマスターページとして再アップロードします。)

サイト全体のマスターページは [サイトの設定] (/_layouts/changesitemasterpage.aspx にあります) の設定によって決定されますが、マスターページの参照をページ レイアウトにハードコードすることもできます。次に、そのページ レイアウトを使用して新しいページを作成すると、IE8 ではなく IE11 としてレンダリングされます。

編集: または、はい、代わりに jQuery を使用して、CSS が認識されないという問題を回避できます。この方法を使用する場合、本質的に IE8 をサポートしていることになるため、jQuery の最新バージョンはおそらく動作しないことに注意してください (ただし、由緒あるバージョン 1.1 は問題ないはずです)。

于 2015-10-08T03:24:24.747 に答える