スポンサードリンク

他のブラウザでは、タブにカーソルを合わせると「…」で切れたタイトルがツールチップで全て見える。

一杯タブ出してるときとか便利なのですが、Edgeはツールチップが出ない…

出せるのかも分からない…

ボタン系は出るのだが。

 

地味に使いずらい

Edgeでbuttonタグにdisabledを設定してもonclickイベントが通ってしまう不具合があったのでメモ。
色々調べてみたところ、以下の条件でonclickが発生してしまうみたいです。

「buttonタグにdisabledを設定して、別タグを内包した場合」

1. これはダメっす。onclickが通ってしまいました。
<button type="button" onclick="btnClick()" disabled="disabled"><span>spanタグが有ります。</span></button>

2. これは大丈夫です。onclickが通りませんでした。
<button type="button" onclick="btnClick()" disabled="disabled">タグ無しです。</button>

上記「1.」のようにspanタグや他のタグ(div / p等)を入れて試してみました。
下図のような感じで、spanタグの背景を赤にしてわかりやすくして、クリックするとその部分のみonclickが通ってしまいました。

click バグ

■html

<button type="button" onclick="btnClick()" disabled="disabled"><span>spanタグが有ります。</span></button>
<button type="button" onclick="btnClick()" disabled="disabled">タグ無しです。</button>


■css / js

<script type="text/javascript">
function btnClick() {
alert("btnClick");
}
</script>
<style type="text/css">
button {
width: 160px;
height: 60px;
vertical-align: middle;
}
button > span {
display: block;
width: 100%;
height: 100%;
color: #fff;
background-color: #f00;
}
</style>

Edgeはまだまだ情報が少ないから難しいですね・・・


2015/10/21 追加です。

javascript と Jqueryでclickイベントを試してみました。
以下テストパターンです。
---------------------------------------------------------------------------------------------------
■js
// テストパターン1
window.onload = function(){
var element = document.getElementById("btn_click");
element.onclick = function() {
alert("ID: btnClick");
}
}
$(function(){
// テストパターン2
$("#btn_click_on").on("click", function() {
alert("on: btnClick");
});
// テストパターン3
$("#btn_click_live").live("click", function() {
alert("live: btnClick");
});
// テストパターン4
$("#btn_click_click").click(function() {
alert("click: btnClick");
});
});
■html
<button type="button" id="btn_click" disabled><span>spanタグが有ります。</span></button>        <!-- テストパターン1 -->
<button type="button" id="btn_click_on" disabled><span>spanタグが有ります。</span></button>        <!-- テストパターン2 -->
<button type="button" id="btn_click_live" disabled><span>spanタグが有ります。</span></button>    <!-- テストパターン3 -->
<button type="button" id="btn_click_click" disabled><span>spanタグが有ります。</span></button>    <!-- テストパターン4 -->
---------------------------------------------------------------------------------------------------

上記の結果は以下になりました。
---------------------------------------------------------------------------------------------------
・テストパターン1 → × イベントが通ってしまいました。
・テストパターン2 → × イベントが通ってしまいました。
・テストパターン3 → ○ イベントが通りませんでした。
・テストパターン4 → ○ イベントが通りませんでした。
---------------------------------------------------------------------------------------------------

原因は分かりませんが、「.live」「.click」は大丈夫でした。


 
white-space: nowrap;を設定した要素の最後にbrを付けて表示をしていたところ、Edgeのみ高さがおかしくなったのでメモ。

1. 「white-space: nowrap;」を設定した要素の最後にbrつけてみる。
■css
div {
    margin: 0 0 1em;
    padding: 0;
    height: auto;
    background-color: #ccc;
}
div span {
    white-space: nowrap;
}

■html
<div>
    <span>
        「white-space: nowrap;」を設定したタグの最後にbrタグをつけると高さがおかしくなる?<br>
        brタグの高さがおかしい?テスト1<br>
    </span>
</div>
<div>
    <span>「white-space: nowrap;」を設定したタグの最後にbrタグをつけると高さがおかしくなる?<br>brタグの高さがおかしい?テスト2<br></span>
</div>
<div><span>「white-space: nowrap;」を設定したタグの最後にbrタグをつけると高さがおかしくなる?<br>↑ 改行を消すとbrの高さが無くなる。テスト3<br></span></div>
<div>
    <span class="normal">「white-space: normal;」を設定するとbrタグの高さが直る?<br>brタグの高さがおかしい?テスト4<br></span>
</div>




 
続きを読む >>
1

スポンサードリンク